Verktyg för att kontrollera redundans i CSS-mallar

På långvariga projekt är det lätt hänt att CSS-mallarna växer sig väldigt stora, och det är svårt att hålla reda på vilka klasser som verkligen används.

Infovore har försökt tackla detta problem med verktyget CSS Redundancy Checker som finns att ladda hem på Google Code. Man måste ladda hem det och köra det lokalt och enligt beskrivning ska det söka igenom koden och identifiera CSS-klasser som inte används. Det fungerar bara med HTML-filer, ej dynamiskt genererade webbplatser.

Nu väntar vi bara på en online-version. Eller är det nån som vet om det redan finns en sådan tjänst?

By Jesper Lind

Jakten på de perfekta knapparna

Att göra knappar som är snygga och fungerar bra är inte så lätt i nuvarande versionen av HTML.

Använda vanliga bilder

Man kan ju göra knapparna som vanliga bilder i t ex Photoshop, men nackdelen är att texten inte går att förstora eller förminska i webbläsarna. Villl man byta färg på dem eller ändra utseendet är det bara till att göra om dem igen.

Input submit

Eller så kan man göra input-varianten men dessa är nästan omöjliga att styla om med CSS. Och standardutseendet varierar ju i de olika webbläsarna vilket inte är så roligt om man vill att designen ska se samma ut oberoende av system.

HTML button

Button-taggen är lite trevligare eftersom den går att ändra design på och även lägga egna ikoner eller extra markup inom. ParticleTree har en bra genomgång av detta.

Filament Group testar vidare och visar upp en knapp som använder sliding-doors tekniken.

En stor nackdel med Button är dock att IE inte hanterar dem så bra. IE tar emot innerHTML istället för value när man postar formuläret.

Länkar som ser ut som knappar

På denna bloggen använder vi länkar som knappar eftersom då får man större frihet på utseendet. De är dock inte speciellt fancy.

Roger Johansson har gjort ett riktigt ambitiöst försök att göra om länkar till knappar med hjälp av extra markup och giffar. Ser snyggt ut men lite väl mycket extra kod.

Sen är ju faktiskt länkar till för navigation och inte för att posta formulär så denna lösningen brister lite ut semantisk synpunkt.

Vad är bäst?

Valet är inte självklart utan man får se vad som passar bäst för varje enskilt projekt. Ibland kanske de vanliga standardknapprna duger eller i andra fall kan vanliga bilder vara det enda rätta.

Skönt är i alla fall att det finns så många duktiga utvecklare där ute som gör sitt bästa för att hitta den där perfekta knappen.

By Jesper Lind

Centrera ett html-objekt med negativa marginaler

Hittade en bra guide på Alsacreations som visar hur man kan centrera ett html-objekt med css. Här tänkte jag återpublicera ett av kodexemplena som visar hur man centrerar både horizontalt och vertikalt genom att använda negativa marginaler. Har testat så att det fungerar med IE6 och 7 samt Firefox 2.

Html-koden är simpel med endast en div som har id "content".

<body>
<div id="content">
This text will be centered.
</div>
</body>

Css-filen innehåller en del regler. Med denna teknik måste man ange fast bredd och höjd på elementet som ska centreras. Ta sedan dessa värden, halvera dem för att lägga in som negativa marginaler.

body {
margin: 0; /* to avoid margins */
text-align: center; /* to correct the centering IE bug*/
}


#content {
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 200px;
margin-top: -100px; /* half of the height */
margin-left: -250px; /* half of the width */
border: 1px solid #000; /* temporary border */
text-align:center;
}

By Jesper Lind

Stapeldiagram formaterade med CSS

Jag och en kollega diskuterade lite igår om hur man kan rita upp stapeldiagram på bästa sätt. Vi pratade om Flash, Microsofts nya WPF/E-teknik eller att använda JavaScript.

Till mitt nöje ser jag idag att Marcus på media:screen, har skrivit lite om stapeldiagram med CSS. Detta inser man ju snabbt att det är ett väldigt intressant alternativ. Besökaren behöver inga extra tillägg i webbläsaren och rendereringen kommer bli väldigt effektiv eftersom det är i HTML.

Att göra det med CSS borde också vara bra för att få fina utskrifter på papper. Då kan man ju ange en speciell stilmall för utskrifter, där man t ex tar bort bakgrundsbilderna till staplarna.

Marcus har arbetat med Eric Meyers vertical bargraphs som utgångspunkt. Han har gjort en egen enklare variant av stapeldiagrammen som jag tycker blir riktigt bra. Snyggt jobbat!

Uppdatering: Nu har Marcus utökat exemplet med en utskriftsvänlig version.

By Jesper Lind

Utvärdering av textarea-editorer

Läste nyligen hos media:screen att Peter Kranz har gjort en utvärdering av textarea-editorer och rangordnat dem enligt hur bra de klarar av att formatera giltig HTML. Totalt åtta olika editorer finns med i testen, sju av dem är så kallade WYSIWYG-editorer och en av dem är en WYSIWYM-editor.

Den senare beteckningen (What You See Is What You Mean) var något nytt för mig men låter definitivt som något att kolla vidare på. Om jag har förstått det rätt så ska denna nya typ av editor generera XHTML och separera innehåll från formatering i större mån. Läs mer om den nya typen av editor eller testa en demo-version av WYMeditor som hör till denna kategori.

Med på Peters test finns TinyMCE som jag installerade i mitt blogg-system nyligen. Den kom bara på tredje plats i testen pga inkorrekt nästlade listor, inget stöd för tabellcaptions och avsaknad av lang-attributet. I nästa version av editor (2.1) kommer dock dessa problem vara lösta meddelar utvecklarna på Moxiecode i en kommentar till testet.

By Jesper Lind

Radbryt och paragrafer

Robert Nyman skriver ett inlägg om i vilka lägen man bör använda <br />-taggen. Med de för tillfället 32 stycken kommentarerna fortsätter det hela till en intressant diskussion ur många synvinklar.

Tänkte passa på att ta skriva om en ganska massiv manöver jag nyligen genomförde på den här bloggen. Innan denna så avgränsades alla textstycken av dubbla radbryt och jag skrev all text för hand – inklusive taggarna. Inte en enda <p>-tagg på långt ögat nådde. Även alla länkar hårdkodade jag vilket blev väldigt jobbigt i längden, som ni kan förstå.

Så jag beslutade mig för att leta upp en WYSIWYG-editor och installera i vårt egenutvecklade bloggverktyg. Senast jag letade efter en sådan var för några år sen och då kunde jag aldrig hitta en som fungerade på alla marknadsledande webbläsare. Nu hittade jag äntligen en, nämligen den förträffliga TinyMCE, som för övrigt även används i Wordpress.

Sedan plöjde jag igenom alla inläggen med editorn och formaterade paragraferna som de bör göras. Rätt jobbigt kan jag lova eftersom vi precis som bloggen Reklamchock!!! nyligen firade 200-inläggs-jubileum.

Men nu är alla inlägg mer semantiskt korrekta och jag är en mycket gladare bloggare.

By Jesper Lind

Placera objekt vertikalt i block-element

Så här kan man göra för att ange vertikal position på text och bild inuti ett block-element. Man lägger två div runt om varandra och får dem att uppföra sig som tabell respektive tabell-cell.


HTML och CSS

<style type="text/css">
#outer{
width:300px;
height:300px;
border:1px solid #ccc;
padding:5px;
display: table;
position: static;
}
#inner{
display: table-cell;
vertical-align: middle;
position: static;
text-align:center;}
</style>
<div id="outer">
<div id="inner">
<img src="http://www.codeodyssey.se/upload/resource/blog/ufo_light.jpg" alt="ufo light">
</div>
</div>

Att få innehåll att placera sig vertikalt enligt box-modellen har alltid varit lite krångligt. Läs mer på Jakpsatweb.cz där jag hittade lösningen. Finns även länkar till fler som försökt.

By Jesper Lind

Så får du dina länkar att synas

Det finns flera sätt att göra länkar synliga bland textstycken. Här under visar jag några av dem.

This is a link right here but you couldn't see it right? Perhaps we should make them appear with dots beneath them like this or in another color. The yellow shade is a bit too pale, you can hardly see it can you? Or should all links be in bold, inverted or perhaps underlined? Which is your favorite link design?

CSS for the links above

<style type="text/css">
a.noStyle, a.noStyle:link, a.noStyle:active, a.noStyle:visited { color: #000; text-decoration:none; }
a.noStyle:hover { }

a.dotted, a.dotted:link, a.dotted:active, a.dotted:visited { color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.dotted:hover { border-bottom:1px solid #000; }

a.invert, a.invert:link, a.invert:active, a.invert:visited { color: #fff;background-color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.invert:hover { border-bottom:1px solid #000; }

a.yellow, a.yellow:link, a.yellow:active, a.yellow:visited { color: #E2D459; text-decoration:none; }
a.yellow:hover { text-decoration:underline;}

a.underlined,a.underlined:link,a.underlined:
active,a.underlined:visited{text-decoration:underline;}
a.underlined:hover { text-decoration:underline;}</style>

By Jesper Lind

HTML i Outlook och sjukt jobbiga radbryt

Detta är ett irriterande problem som jag har haft ett tag utan att riktigt förstå varför. När jag skickar ut html-formaterade email så händer det ofta att bilder inte visas. Nu har jag forskat lite mer i det hela och börjat förstå lite mer vad som händer. Det hela verkar bero på att outlook klipper av rader lite här och var och lägger in mellanslag. Man kan läsa lite om det här och det finns en inställning i outlook:

Verktyg/Alternativ/E-postalternativ/"Ta bort extra radbrytningar i meddelande med oformaterad text"

Denna är som standard ikryssad men jag kunde inte se någon skillnad när jag kryssade ur den. Och detta är ju inget man kan kräva att användarna ska göra heller.

Men nu tillbaks till problemet. I nyhetsbreven anger jag länkade bilder som har relativ lång url. Dessa klipps av och ett extra mellanrum läggs på först på nästa rad. Ungfär så här:

<a href='http://someaddress.somedomain/product.aspx?pid=12><img src='http://www.someaddress.somedomain/images/someimage.JPG' bord
[här bryts koden mitt i ett html-attribut]er='0'></a>

Jag har testat mängder av ideer, försökt hårdkodat radbryten precis innan länkarna men inte kommit på den bästa lösningen (om det finns någon).

En lösning (nästan)
Det tips jag kan ge är att förkorta html koden så mycket som möjligt och använda kortformerna i CSS. En grej som kan hjälpa är att lägga in massor av space innan de html-taggar som bryts felaktigt. Typ 40-50 stycken space brukar lösa det mesta. Det hela känns väldigt slumpmässigt och minst sagt irriterande. Mailklienterna nu för tiden är helt enkelt inte riktigt redo för html.

Radbryt i maillänk
I mitt frenetiska sökande efter hur man kunde rundgå radbryten hittade jag en en sida med relaterad information. Tänkte jag sparar den här för den kan bli användbar. Det handlar om hur man gör radbryt i en "email länk", en sån som fyller i ämne och body själv. Då använder man ascii tecknena (%0D)=a carriage return och (%0A)=line feed.

<a href="mailto:someaddress@somedomain.com?cc=someotheraddress@somedomain.com&subject=some subject&body=Some body text.%0D%0ASome new line.">create email</a>

By Jesper Lind

Ha konsekvens på dina länkar

Jag läste en notis på Användbarhet.se som jag instämmer med. Man utforma sina länkar konsekvent och inte blanda understrukna och icke-understrukna länkar. Detta lägger ett alltför tungt tolkningsjobb på användaren.

Menyer och länkar bör vara intuitiva och man ska förstå vad som går att klicka på utan att behöva testa allt. Understrykningar är ett bra sätt eftersom vi är så vana med att länkar ser ut så. Annars är ett annat bra sätt att ange länkar i en speciell utstickande färg.

By Jesper Lind