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?
Nu har jag testat att använda CSS Friendly Control Adapters som jag nämde förra året. De fungerar verkligen magiskt bra och man får en mycket mer CSS-vänlig HTML-kod från kontrollerna i Asp.Net.
Dels det lite omständiga sättet som Microsoft har utvecklat, här måste man lägga till speciella javascript och CSS bibliotek. Då får man dock större kontroll över koden om man vill modifiera den själv.
Observera att jag koden skiljer sig lite från den i forum-tråden. Så jag kan inte lova att viewstate verkligen fungerar med denna modifikation. I mitt fall behöver jag inget viewstate så jag nöjer mig där.
Hittade just Mark Boulton's blogg som skriver en hel del läsvärt om typografi och webbdesign. Inlägget om hur man kan få en snygg vertikal rytm i textstycken är riktigt intressant.
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.
Säkerhetsexperter upptäckte för ett tag sen att CSS-historiken kunde användas till att ta reda på vilka webbplatser en besökare har vart på tidigare. Normalt används detta endast för att webbläsarna ska kunna markera besökta länkar i en annan färg eller stil.
Ett hot mot integritet kan man tycka och definitivt ett säkerhetsproblem. En nätfiskare kan med denna metod enkelt får reda på om besökaren nyss har loggat in på Gmail, Hotmail, Yahoo eller vilka banktjänster denna använder. Och på sådant sätt rikta sina nätfiskningsaktioner mot just de tjänster som användaren nyttjar.
Jeremiah Grossman visade upp exempelkod i postningen "i know where you've been" redan för ett halvår sedan och RSnake har ett "CSS History Hack"-demo (för Firefox) som visar hur det fungerar i praktiken.
Jag har själv bara väntat på att man skulle få se exempel på "kreativ markadsföring" eller småfunktioner som förhöjer besökarens upplevelse. Att få tillgång till sån här extra information om besökaren borde ju locka många sajtutvecklare.
Bloggen int2e.com visar nu ett exempel på ett användningsområde. De beskriver ett skript för en flexibel "Digg-knapp" som bara visas för besökare som tidigare vart på Digg.com.
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.
Letar du efter ett sätt att göra ett röstningssystem med stjärnor, som när man klickar på, ändrar sig vid hoover? Då kan jag rekommendera Rating control i ASP.NET AJAX Control Toolkit.
Eller om du använder ett annat serverspråk, och vill göra det med CSS, kanske artikeln CSS star rating part deux kan vara till nytta.
Att hålla reda på elementen i stora stilmallar i CSS kan lätt bli en svår uppgift. Speciellt om man är flera utvecklare som jobbar med samma filer. Kan rekommendera en artikel av Emil Stenstöm som skriver om hur man organiserar CSS-filer på bästa sätt.