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?
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.
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.
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; }
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.
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.
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.
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.
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.
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>
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.
