Zločin i kazna by W3C Validator(ski) 3 - CSS

Zašto vršiti validaciju CSS-a?

Šta je najgore što može da se desi ukoliko postoje greške? Jedino što može da se desi to je da broweser(i) ignorišu linje koda sa greškama i da vaš sajt izgleda sasvim drugačije od onog kako ste zamislili.

Sledeći link Why Validate Cascading Style Sheets? ilustruje razloge zbog kojih treba ispravljati greške (ili grehe... )

Svi CSS fajlovi podvrgnuti validaciji koriste podrazumevane postavke:

Upozorenja: Normalni izveštaj; Profile: CSS Version 2; Medium: Sve. Napredniji korisnici mogu da koriste neku od opcija dodatnog podešavanja.

Podaci se kategorizuju u tri sekcije:

"Author-Generated Errors" kada su greške uzrokovali sami autori

"Vendor-Specific Errors" greške proizvodjačkog koda

"Validator-Generated Errors" greške koje nisu u skladu sa specifikacijama CSS-a

CSS kodovi u nastavku su uzesti samo kao primer radi ilustracije i lakšeg razumevanja.

Navešćemo samo najčešće i najrasprostranjenije greške.

1. Tipografske greške

Ovi primeri su tipografske greške. One su ujedno i najčešće greške koje se javljaju i najlakše ih je identifikovati i ispraviti.

Line: 63 Context : h3
Invalid number : font-weight ligher is not a font-weight value : ligher
Line: 441 Context : #footer
Invalid number : margin Unknown dimension : 2x
Line: 199
Invalid number : color 00000 is not a valid color 3 or 6 hexadecimals numbers : #00000
Line: 102 Context : .primary .item .pagetitle
Invalid number : background Too many values or values are not recognized : ffffff
Line: 47 Context : #portfolio .right .c0
Invalid number : width only 0 can be a length. You must put an unit after your number : 280

2. Whitespace greške

Line: 240
Parse error - Unrecognized : . label { font-style: italic; }

U kodu to izgleda ovako:

. label {
font-style: italic;
}

Prazno mesto ili "Whitespace" je između indikatora klase "." i imena.

Sledeća greška je nešto drugačija:

Line: 324 Context : input#author
Invalid number : font only 0 can be a length. You must put an unit after your number : 1.0 em "Lucida Sans Unicode",Arial,Helvetica,Sans-Serif

Kod:

input#author {
margin: 0;
padding: 2px;
font: 1.0 em "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif

"Whitespace" je između veličine fonta i jedinice mere

3. "Auto" greške

Line: 17 Context : body
Invalid number : padding auto is not a padding-right value : 0 auto

Kod:

body {
margin: 0 auto;
padding: 0 auto;
background-color: #fff;
text-align: center;
font-family: "Trebuchet MS", Verdana, Arial, Serif;
font-size: 10pt;
color: #666;
}

Najčešća upotreba "auto" je vrednost za horizontalno centriranje bloka. Padding ne radi. [Videti: Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, [W3C Working Draft 11 April 2006], 10 Visual formatting model details, 10.3 Calculating widths and margins should other uses be wanted.]

4. Greške u definisanju vrednosti

Greška kada se napišu dve jedinice mere za istu prednost i % i px.

Line: 616 Context : #formuway
Invalid number : width Too many values or values are not recognized : 100% px

Kod:

#formuway {
color: #666;

5. Important! greške

Line: 573 Context : .imagelist ul li a img.lastfmimage
Parse Error - !important }

Kod:

.imagelist ul li a img.lastfmimage {
height: 100px; !important
}

Cascading Style Sheets, level 2, CSS2 Specification, 4.1 Syntax, 4.1.8 Declarations and properties

Po pravilim apisanja CSS-a posle dve tačke (:) mora da sledi neka vrednost. Može biti prazno mesto ispred ili iza. Zbog načina rada, višestruke deklaracije jednog selektora moraju biti odvojeni sa tačka-zarez (;)

Primer:

Ovako napisan kod:

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

isto je što i:

H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}

Primetićete da u poslednjem redu nema ; (tačka-zarez) - nemojte da vam to bude praksa. Poštujte principe dobrog i ispravnog formatiranja "well-formedness", uvek koristite ovaj interpunkcijski znak, za završetak deklaracija sa jednom vrednošću, kao i za poslednji u nizu kod višestrukog definisanja vrednosti. Da se vratimo na !important - koji treba da bude pre tačka-zarez (;)

6. Greške Font skraćenica

Line: 336 Context : #sidebar #searchform #s
Invalid number : font Parse Error - [empty string]

kod:

#sidebar #searchform #s {
width: 125px;
padding: 2px;
font: .8em;
}

Line: 412 Context : .primary .item .itemtext
Invalid number : font 'Lucida Grande' is not a font-size value : 'Lucida Grande', Verdana, Arial, Sans-Serif

kod:

.primary .item .itemtext {
font: 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: justify;
font-size: 11px;
line-height: 16px;
color: #444;
}

Pravila za skraćenice

Postoji mogućnost da pojedine vrednosti definišete u okviru jedne osobine. Npr. 'font' u skraćenom obliku sadrži 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', i 'font-family' sve odjednom.

Kada se piše u skraćenom obliku svaka od izostavljenih vrednosti dobija neku svoju "inicijalnu" vrednost.

Primer:

h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}

može da se napiše i na sledeći način:

h1 { font: bold 12pt/14pt Helvetica }

U ovom primeru 'font-variant' i 'font-style' dobijaju inicijalne vrednosti i to je ispravan "font shorthand".

7. Greške sa zarezima (,)

Line: 19 Context : body
Invalid number : font Too many values or values are not recognized : normal 80%/15px 'Trebuchet MS' Helvetica,Arial,Geneva,sans-serif

Kod:

h1 {
font: normal 80%/15px 'Trebuchet MS' Helvetica, Arial, Geneva, sans-serif;
line-height: 18px;
color: #007CB9;
padding-bottom: 0px;
margin: 0;
}

Nedostaje zarez posle 'Trebuchet MS' - "'Trebuchet MS' Helvetica" je neispravno, ovo je jedna od grešaka koja se veoma često javlja.

8. Greške kad nedostaje ; (tačka-zarez)

Line: 57 Context : h2
Invalid number : font attempt to find a semi-colon before the property name. add it
h3 {
font: normal 1em 'Trebuchet MS' Arial, 'Times New Roman', Serif
color: #222;
padding: 0;
}

9. Legacy greške

Line: 604 Context : entry img.wp-smiley
Invalid number : vertical-align absmiddle is not a vertical-align value : absmiddle

Kod:

.entry img.wp-smiley {
float: none;
margin: 0;
vertical-align: absmiddle;
}

10. Underscore Hack Errors

Line: 110 Context : .secondary
Property _width doesn't exist : 28%

Ovo je tzv. "underscore hack". [ videti The Underscore Hack prvi put objavljeno November, 21 2003 by Wellstyled.]

Posebne proizvodjačke specifikacije:

Inicijalna crtica (-) ili donja crta (_) se ne koriste niti će se koristiti u budućim verzijama CSS-a, kao naredba ili ključna reč.

-moz-box-sizing
-moz-border-radius
-wap-accesskey

Pročitajte ovo 4.1.3 Characters and case,

11. "None" greške

Line: 216 Context : #grav-signup-holder label.evil-checkbox input
Invalid number : background-color none is not a color value : none

Kod:

#grav-signup-holder label.evil-checkbox input {
float: left;
background-color: none;
border: none;
}

Line: 183 Context : #quickiesChoice
Invalid number : font-weight none is not a font-weight value : none
Line: 100 Context : #maincontent li
Invalid number : padding none is not a padding-top value : none
Line: 100 Context : #maincontent li
Invalid number : margin none is not a margin-top value : none

Primer koda:

#maincontent li {
padding: none;
margin: none;
}

Upotreba "none" je vrlo popularna. Koristi se u svim mogućim kombinacijama za definisanje nulte vrednosti - što naravno ne mora da znači i da je to ispravno. Za vrednosti koje zahtevaju broj umesto "None" koristite nulu - "0"; u slučaju background-colors, umesto "None" ili sasvim izbacite tu "background-color" ili koristite "Transparent".

"display: none" - je OK.

12. Cursor Hand Errors

Line: 393 Context : #right .image:hover
Invalid number : cursor hand is not a cursor value : hand
Line: 21 Context : a:link, a:visited, a:active
Invalid number : cursor hand is not a cursor value : hand

Cascading Style Sheets, level 2, CSS2 Specification, 18 User interface, 18.1 Cursors: the 'cursor' property preporučuje : auto

Line: 336 Context : a:hover
Invalid number : color grey is not a color value : grey
a:hover {
text-decoration: underline;
color: grey;
font-weight: 700;
}

Cascading Style Sheets, level 2, CSS2 Specification, 4 CSS2 syntax and basic data types, 4.1.2 Keywords

Ključne reči ne smeju biti unutar zagrada ("..." ili..'). Red je ključna reč ali "red" nije (to je string).

Drugi primeri:

width: "auto";
border: "none";
font-family: "serif";
background: "red";

Sintaksa i osnovni tipovi podataka, 4.1 Syntax, 4.3 Values, 4.3.6 Colors naredbe,

<color> je i ključna reč i/ili numerička vrednost RGB.

Lista boja: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i yellow.

Grey nije uključena kao boja.

14. Mešane greške (smuti pa prospi)

Line: 61 Context : h3
Invalid number : line-height Parse Error - [empty string]
h3 {
line-height: 1;
}

Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification [W3C Working Draft 11 April 2006], 10 Visual formatting model detail, 10.8 Line height calculations: 'line-height' i 'vertical-align', 10.8.1 Leading and half-leading treba pisati na sledeći način,

'line-height'

U slučaju block-level, table-cell, table-caption ili inline-block elemenata, koji su sastavljeni od inline-level elemenata, 'line-height' specificira minimalnu visinu boksa u okviru elementa. Minimalna visina predstavlja minimalnu visinu iznad osnovne linije bloka i minimalnu dubinu ispod, tačnije svaki line-box počinje sa nultom širinom inline boksa sa visinom blok fonta i line height ("strut").

U slučaju inline-level elementa, 'line-height' određuje visinu koja se koristi za izračunavanje visine line box-a (izuzev za inline replaced elements, gde je visina boksa definisana u 'height' property).

Vrednosti imaju sledeće značenje:

normal

Vrednost se bazira na veličini fonta elementa. Ova vrednost ima isto značenje kao i <number>. Preporuka je da se za 'normal' koriste vrednosti između 1.0 to 1.2.

<length>

Specificirana dužina se koristi za izračunavanje visine line boksa. Negativne vrednosti nisu dozvoljene.

<number>

Vrednost ovog izraza (visina linije) je broj pomnožen sa veličinom fonta elementa. Nije dozvoljena negativna vrednost..

<percentage>

Izračunata vrednost je procentualno povećanje u odnosu na veličinu fonta. Nije dozvoljena negativna vrednost.

Primeri:

div { line-height: 1.2; font-size: 10pt }     /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

Ceo broj (Integer) "1" je neispravan; broj "1.0" je ispravan. Razlog, ako što je gore napisano, je taj da vrednosti treba da budu upisane kao realni (decimalni) brojevi kao što to zahteva Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, 4 Syntax and basic data types, 4.3 Values, 4.3.1 Integers and real numbers .

Ovim bih zavrsila deo priče o validaciji. To naravno nije i kraj priče - ovo je priča bez kraja, sa mnogo nastavaka i sa neočekivanim obrtima. Na vama je da se odlučite da li ćete se pridržavati određenih pravila, isto kao sto od vas zavisi da li ćete se truditi da vam sajt prođe validaciju.