Test: Jak dobře umíte CSS?

 |  HTML, CSS, JavaScript  |  4 527x
Test: Jak dobře umíte CSS?

CSS není jen o znalosti atributů a jejich vykreslení v tom či jiném prohlížeči - CSS skrývá i spoustu dalších úskalí. Denně přicházím do kontaktu s weby, jejichž stylové předpisy mají 30 kilobytů či více, a věřte nevěřte, jsou i případy, kdy se přidání nebo smazání některé globální definice rovná píchnutí do vosího hnízda. Někdy totiž nestačí pouze vyladění pro nejpoužívanější prohlížeče - člověk musí znát i způsoby zápisu té samé definice a prioritu, kterou bude mít oproti definicím ostatním. Říká se, že poslední definice platí...

A já se ptám: Kdo za to dá ruku do ohně?

1.) Mějme následující HTML kód:

<div id="all" class="all">
  <p id="test" class="test">&nbsp;</p>
</div>

K němu se z připletl takovýto CSS předpis:

#all p {border:1px solid black;}
#test {border:1px solid blue;}
.test {border:1px solid red;}
div p {border:1px solid green;}

A já se ptám: Jakou barvu bude mít rámeček? Proč?

2.) Zápis trochu obměníme. Nyní se bude prohlížeč rozhodovat pouze mezi dvěmi definicemi:

#all .test {border:1px solid green;} 
.all #test {border:1px solid orange;}

Jakou barvu bude mít rámeček nyní? Proč zrovna tu?

3.) Styly opět změníme. Je spousta možností, jak definici zapsat:

#all #test {border:1px solid violet;}
body .all #test {border:1px solid red;}
html body div p {border:1px solid orange;}
html body .all .test {border:1px solid yellow;}

Že nevíte, na co se zeptám?

4.) A na konec něco trochu jednoduššího:

.test {border:1px solid blue;}
div .test {border:1px solid red;}
p {border:1px solid brown;}

 

Dříve, než se podíváte dále do článku na řešení, zkuste si tipnout, jak tomu bude. Která vlastnost se projeví? Zkuste také odhadnout, která vlastnost bude mít druhou nevyšší prioritu.

 

Stejně tak, jak se říkají malým dětem pohádky o princovi, který zabije draka a zachrání princeznu (dá si pár piv a odjede na harleyi... pardon), tak se i malým webmasterům říkají pohádky o poslední CSS definici, která platí. Ve světe "dospěláků" tomu ale tak není. Ani s princeznou, ani se styly.

Obecně se říká, že nejvyšší prioritu má identifikátor. V prvním případě ale roztrhne cílovou pásku kaskádová definice. Rámeček bude černý, a černým i zůstane. Identifikátor by tady obsadil až místo druhé. Za ním třída a jako poslední obecná definice pro odstavec v divu. Zde má tedy poslední definice prioritu nejnižší. Ať už řádky jakkoli obměníme, priority zůstanou stejné.

Podívejme se na druhou ukázku. V obou kaskádových definicích je zmíněna jak třída, tak IDčko. Ti z Vás, kteří tipovali oranžovou měli pravdu. Rámeček bude oranžový. V tomto případě jako v jediném ale platí pravidlo poslední definice: změníme-li pořadí, rámeček bude zelený.

Třetí bod je asi nejzáludnější. Jednotlivé definice můžeme jakkoli přeházet, rámeček bude ale vždy fialový. První řádek přebije všechny ostatní, protože je v něm vyjmenován největší počet identifikátorů vedoucí k prvku, kde se má vlastnost projevit. Další pořadí je jasné: jeden identifikátor je silnější než dvě třídy, dvě třídy zase silnější než vyjmenování elementů. Pořadí nehraje ani v nejmenším roli.

Na čtvrtou otázku už snad odpovídat ani nemusím, chování bude stejné jako v prvním případě - rámeček bude červený.

Tak jak jste uspěli? Umíte dobře CSS

Facebook Twitter Google+

Komentáře k článku "Test: Jak dobře umíte CSS?"

Gravatar
Peta 5. 11 2008, 19:31
1/9 Středa 5. Listopadu 2008, 19:31  |  Opera, Windows Vista

Perfektni clanek, takze z trochou nadsazky receno, cim delsi ukazatel tim vetsi sila %4

Gravatar
Tommy 19. 11 2008, 12:23
2/9 Středa 19. Listopadu 2008, 12:23  |  Mozilla, Windows XP

Pěknej článek, takhle jsem nad tím ještě nepřemýšlel...%1 A rovnou se vzhledem k mým odpovědím přiznám, že CSS neumím dobře%8

Gravatar
machy 3. 2 2009, 13:55
3/9 Úterý 3. Února 2009, 13:55  |  Opera, Windows XP

Hmmm, musím se přiznat, že jsem vše uhádl dobře %1 Asi díky tomu, že jsem si nedávno koupil Mistroství v CSS (doporučuji).

Gravatar
Mike 3. 2 2009, 18:04
4/9 Úterý 3. Února 2009, 18:04  |  Opera, Windows XP

[3] machy: měl bys link? :) nejlépe i s ukázkou :)

Gravatar
machy 3. 2 2009, 20:11
5/9 Úterý 3. Února 2009, 20:11  |  Opera, Windows XP

[4] Mike: Bohužel, pokud myslíš PDF, tak já si jí koupil (papírovou%4)

Gravatar
Mike 4. 2 2009, 00:02
6/9 Středa 4. Února 2009, 00:02  |  Opera, Windows XP

[5] machy: špatně jsem se vyjádříl %0 prostě nějaký odkaz na nějaký eshop, kde tu knížku prodávají, kde bych si o ní něco mohl přečíst (doporučení, recenze, nebo tak...)

Gravatar
machy 14. 2 2009, 19:53
7/9 Sobota 14. Února 2009, 19:53  |  Opera, Windows XP

http://knihy.cpress.cz/knihy/pocitacova-literatura/webdesign-tvorba-www-stranek/mistrovstvi-v-css-pokrocile-techniky-pro-webove-designery-a-vyvojare/

Gravatar
vasekS 14. 3 2009, 13:35
8/9 Sobota 14. Března 2009, 13:35  |  Opera, Windows 7

Musím uznat, mé css je tragédie. Měl bych začít pracovat nejen na funkčnosti ale i validitě a profesionalitě ;) Díky za tip na knihu %8

Gravatar
Adam Šorfa 31. 5 2011, 17:48
9/9 Úterý 31. Května 2011, 17:48  |  Chrome, Windows XP

JOO, dal sem 100% a napoprví XD. CSS se učim z již zmíněné knihy Mistrovství v CSS a chtěl sem si vyzkoušet, jestli to fakt takhle funguje. Jinak, moc pěkný příklady.

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua