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

CSS Friendly Control Adapters

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.

Hur man installerar adaptrarna

Det finns två olika sätt att lägga till adaptrarna som även CodeClimber förklarar.

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.

Vill man göra det enklare för sig så kan man använda Brian DeMarzo's variant som nu finns som ett eget projekt på CodePlex. Microsoft har lämnat sina över hela projektet till CodePlex så det är där som utvecklingen kommer att ske i framtiden.

Instruktionerna är enkla och görs genom tre steg:

  1. Ladda hem det senaste filerna.
  2. Lägg till en referens till CSSFriendly.dll i din webb-applikation.
  3. Lägg till CSSFriendlyAdapters.browser konfigurationen till App_Browsers mappen.

Kan ställa till problem med ViewState

När jag använde de vanliga adaptrarna (inte CSSFriendly.dll) Stötte dock inledningsvis på ett error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Är inte säker på vad det berodde på, men hittade en lösning i en tråd på .NET-forumet.

Problemet var i TreeView och efter jag la in följande kod så fungerade det.

private string _strviewState = string.Empty;

private string ViewStateID
{
get { return Control.ClientID + "__VIEWSTATE"; }
}

...

protected override Object SaveAdapterViewState()
{
string retStr = "";
TreeView treeView = Control as TreeView;
if ((treeView != null) && (_viewState != null))
{
if ((_viewState != null) && (Page != null) && (Page.Form != null))
{
Page.ClientScript.RegisterHiddenField(ViewStateID, _strviewState);
string script = "document.getElementById('" + ViewStateID + "').value = GetViewState__AspNetTreeView('" + Extender.MakeChildId("UL") + "');";
Page.ClientScript.RegisterOnSubmitStatement(typeof(TreeViewAdapter), ViewStateID, script);
}
retStr = ViewStateID + "|" + ComposeViewState(treeView.Nodes, "");
}
return retStr;

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.

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

Besökarhistorik med CSS-hack

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.

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