5 anledningar till att strunta i validering

Validering är när din sida klarar testet som utfärdas av W3C, som kontrollerar att din HTML och CSS är korrekt skriven beroende på vilken typ av HTML du deklarerar att du skriver i början av ditt HTML-dokument. CSS deklareras inte, det finns bara en rådande standard idag. HTML har en hel del, nämligen HTML och XHTML som kan skrivas i Strict, Transitional och Frameset. Läs mer om de olika typerna här.

För inte så länge sedan satt jag med två kundjobb som skiljde sig rätt avsevärt i krav och villkor. Det ena jobbet krävde att sidan skulle validera, den andra inte. Denna typ av krav beror oftast på kundens kunskap om hemsidor m.m., men det var en så kallad ”eye-opener” för mig och gav mig inspiration till att skriva 5 anledningar till att strunta i om din hemsida validerar eller ej.

1. Du tjänar pengar på din hemsida genom annonser

En sida med mycket trafik brukar ofta innehålla en hel del reklam, i form av annonser. Annonser brukar ofta hämtas från utomstående tjänster och innehålla trackingkoder. Dessa trackingkoder validerar inte i HTML. Man kan alltid gömma koden med hjälp av URL-förkortare, men det kan vara mycket jobb om man har många annonser och ett väl utarbetat annonssystem på sin hemsida.

2. Du vill ha runda hörn på dina boxar, utan att använda bilder och hacks

CSS3 ger dig möjligheten till att ge din hemsidas boxar rundade hörn. En väldigt trevlig egenskap där du slipper använda bilder. Detta validerar inte då det är CSS3 och den rådande standarden idag är CSS2.1. Såhär ser följande deklaration ut för runda hörn:

<div style="background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;"></div>

…vilket ger dig boxar som ser ut såhär:

Firefox, Chrome och Safari 3 användare bör se rundade hörn.

Internet Explorer 6, 7 och 8 användare, tyvärr…Ni kan inte se de rundade hörnen…

3. Du vill lägga till en skuggeffekt på dina texter

Den utmärkta egenskapen text-shadow finns i CSS3 och låter dig lägga en skugga på dina rubriker, länkar och paragrafer. Inte detta heller validerar, vilket är synd. Man kan åstadkomma väldigt många fina effekter med denna egenskapen. Egenskapen text-shadow ser ut som följande:

text-shadow: 2px 2px 2px #000;

…och åstadkommer följande:

Användare av Webkit (Safari 3+), Opera 9.5, Firefox 3.1 bör se skuggeffekten.

4. Du vill även ha en skuggningseffekt på dina boxar

Förutom att lägga skugga på dina texter så har du även möjligheten att skugga dina boxar, som du möjligtvis också lagt rundade hörn på! Effekten heter box-shadow och följer samma princip som text-shadow. Följande effekt uppnås:

box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px;

..och resultater blir följande:

Du bör se en skuggeffekt undertill boxen. Resultat kan variera. Visst är CSS3 intressant och praktiskt?

5. Du vill börja jobba med transparenta/genomskingliga objekt på din hemsida, utan .png bilder.

Egenskapen kallas opacitet vilket säger vilken grad av genomskinlighet ditt objekt har. Två olika typer av opcaitet finns, den ena styrs genom RGBA och den andra genom Opacity.

Webkit, Gecko och Opera stödjer Opacity, medans Webkit och FireFox 3 stödjer RGBA. Såhär deklarerar du för opacitet:

background-color: rgb(0,0,255); opacity: 0.5;

…och resultater blir följande:

Transparent box

Box som är transparent, notera färgskiftningen i höjden. De smälter in i varandra.

Koden för effekten ser ut som följande:

<div style="padding:10px; background-color: rgb(120,230,45); opacity: 0.5;"> <p>Transparent box</p></div>
<div style="margin:-10px 0 0 0; padding:10px; background-color: rgb(230,120,45); opacity: 0.5;"> <p>Box som är transparent, notera färgskiftningen i höjden. De smälter in i varandra.</p></div>

När du förlitar dig på validering så begränsar du dig en del. Detta innebär inte att du alltid ska strunta i validering, det finns en del anledningar till att försöka få sin sida att validera. Mer om det i ett framtida inlägg, där jag ska skriva anledningar till varför du ska validera.

Har du några roliga exempel på sidor som använder mycket CSS3 och kanske även en del HTML 5?

Fler inlägg om Design

http://cynatic.org Andreas Johansson
En sak till som är löjligt med validering är principen med & tecknet i länkar. Det är nog den främsta anledningen till att annonser och tracking-länkar inte validerar.
Har man, som många, en del plugins till WordPress installerat så använder de ofta en herrans massa &-tecken i sina JavaScript länkar och externa anrop, detta hade kunnat avhjälpas med att byta ut till & men känns ändå väldigt irrelevant med hänsyn om varför man egentligen validerar.
Validering gör man för att öka tillgängligheten och kompatibiliteten – ett &-tecken bryter i 99.99999% av fallen inte detta.
http://blogg.scandiwebb.se/ Marcus Lind
Både till Andreas och Antonio så anser jag till skillnad mot er att validering är något positivt. Jag tror att ni verkar anse att bara för att ni inte får Grön flagg ifrån W3C så är validering något negativt? Tänk vad många fel man blir av med tack vare W3C Valideringen!
Jag tycker att det är ypperligt att det finns en standard för gränssnittutvecklare. Att man t ex måste escapa element i samma ordning som man startade dom (Text är fel) eller andra standarder som vi fått fram tack vare validering är ju knappast något negativt. Det gör att vi alla arbetar på samma sätt, vilket är viktigt för utveckling.
Man måste inte vara 100% validerad. Det är ju inte det viktiga. POÄNGEN med validering är ju att hemsidorna ska se likadana ut (i så hög mån som möjligt) i alla webbläsare och om ett & inte gör något skillnad för hur din sida fungerar i IE, Firefox och Safari så strunta i det!
Angående CSS3 kommandon så tycker jag även att det är bra att dom inte valideras. De fungerar ju som sagt inte i alla webbläsare (IE…). Jag håller mig just nu borta ifrån den CSS som inte fungerar överallt. Jag har kört lite pseudoelement (:before, :after) på några hemsidor när det helt enkelt inte går att göra på ett annat sätt men jag håller mig fortfarande till .png bilder för rundande hörn. För att jag vill inte gå miste om de där procenten som sitter i IE.
http://cynatic.org Andreas Johansson
Missförstå mig rätt, jag validerar allt jag gör till den längden det går och jag håller mig inom ramarna även om jag använder en del CSS3 till vissa funktioner.
Men själva grejen med min lilla rant ovanför var att saker som & vs & är något som aldrig 100% kommer fungera på grund av tredjepartlösningar och annonser som ovan är nämnda.
Validering är en bra idé, men man bör inte missbruka det för det även om man inte alltid behöver använda STRICT som DTD.
http://www.grafixstudio.se/ Antonio
Ett tag sedan så var jag en förespråkare för validering. För jag såg det som ett sätt att till 100% få en korrekt layout i alla browsers. Nu gör jag layouts och kodar med avseende till de som kör IE, alltså att om du inte ser runda hörn så påverkar det inte designen alls. Allting flyter samma, med eller utan rundade hörn, shadows m.m.
Se det som ett plus i kanten till de som kan se det istället.
Det finns fall då det SKA validera anser jag. Men det finns anledningar att strunta i det.
Här täcker vi 100% validering och varför man kan välja att strunta i det. Exempelvis när man vill köra CSS3 redan nu innan det är standard. Men som du säger Marcus så behövs inte en 100% validering.
Man ska alltid skriva korrekt HTML och CSS. Standardkonflikterna som råder ska man dock ta med en nypa salt, vilket jag börjat göra på senare tid. ”&”- tecken, om man skriver HTML Strict eller Transitional m.m bör inte tas FÖR seriöst, sålänge det ser korrekt ut i alla browsers…