Využití selektoru zaškrtnutí

Váš prohlížeč nepodporuje selektor zaškrtnutí!

Dříve, než se začtete, se prosím přesvědčte, že váš prohlížeč podporuje selektor zaškrtnutí (pseudotřídu checked) z CSS3. Ne, Aničko, jestli používáš Internet Explorer, tak se demonstrativních ukázek využití tohoto selektoru nedočkáš, promiň. Ale i tak se můžeš zúčastnit a dozvědět se leccos zajímavého.

Minitest

Testík se bude týkat HTML 4.01 Strict. Ti, kteří disponují moderním prohlížečem, se dočkají okamžitého vyhodnocení svých odpovědí, špatná odpověď vždy zčervená. Druhý pokus nebude možný (alespoň ne pomocí kliknutí).

1. Který z následujících komentářů není zapsaný korektně?

   1. <!-- -> komentář <- -->
   2. <!-- komentář -- >
   3. Oba jsou v pořádku.

2. Který z následujících elementů strong není zapsaný korektně?

   1. <strong/Te Deum laudamus/
   2. <strong>Te Deum laudamus</strong>
   3. Oba jsou v pořádku.

3. Který z následujících atributů nemůže z hlediska validity náležet elementu th?

   1. scope
   2. abbr
   3. Oba mu mohou náležet.

4. Řádky které tabulky (zdrojový kód tabulek je uveden níže) nezasáhne selektor table tbody tr, tj. nebude na ně aplikován styl pro tento selektor?

   1. <table>
      <tbody>
      <tr><td>#item1</td></tr>
      <tr><td>#item2</td></tr>
      </tbody>
      <table>
   2. <table>
      <tr><td>#item1</td></tr>
      <tr><td>#item2</td></tr>
      <table>
   3. Zasáhne řádky obou tabulek.

5. Bude-li jako DOCTYPE deklarováno <!DOCTYPE #IMPLIED SYSTEM>, způsobí to, že:

   1. za #IMPLIED se automaticky dosadí jméno kořenového elementu
   2. parser bude relativizovat prvky DTD v systémovém módu
   3. obě výše popsané situace.

6. Lze vnořit blokové elementy do řádkových (např. element div do em) tak, aby to bylo validní?

   1. Ano, např. zmíněný em může klidně být rodičovským elementem pro div.
   2. Ano, ale ne přímo.
   3. Ne!

Správné odpovědi

1. Obsahem komentáře může být cokoliv s výjimkou řetězce sestávajícího ze dvou či více spojovníků (---). Mezi < a !--nesmí být mezera. Mezi -- a > může být mezera. Oba komentáře těmto podmínkám vyhovují.
2. HTML, narozdíl od webových prohlížečů, povoluje NET syntaxi. Správná odpověď je c).
3. Atribut scope rozhoduje o tom, zda bude s hlavičkovou buňkou asociován řádek, sloupec, nebo skupina obsahových buňek. Attribut abbr umožňuje nevizuálním interpretům zkrátit text hlavičkové buňky. Oba atributy lze přiřadit elementu th.
4. Struktura každé tabulky obsahuje element tbody! Pokud tento element v kódu chybí, je prohlížeč povinen si jej tam doplnit. Selektor table tbody tr je tedy v podstatě univerzální.
5. Správně je a) Mimochodem, uvedení tohoto DOCTYPE je jedním z triků, jak zmást validátor.

6. HTML zná dva docela zvláštní elementy – <ins> a <del>. Tyto elementy se od ostatních liší v tom, že mohou obsahovat jak řádkové, tak blokové elementy a zároveň mohou být vnořeny jak do řádkových tak do blokových elementů. To znamená, že můžete stejně tak vyznačit celý odstavec, jako pouze jedno slovo. Specifikace ovšem praví, že pokud se tyto elementy chovají jako řádkové, nesmí již obsahovat prvky blokové. Bohužel, v DTD to opět nijak vyjádřené není, takže přes tyto dva elementy můžete snadno do řádkového prvku propašovat prvek blokový...

   Lukáš Havrlant v článku Na co je validátor krátký.

Zde je testovací stránka, která dokumentuje případy 1ab, 2ab, 3ab, 4b, 6b.

:checked

Pokud vás náhodou rmoutí, že jste v tomto minitestu neuspěli tak, jak jste si představovali, nevěšte hlavu. Zkuste předešlý test z HTML. Ten je méně záludný. Skutečným záměrem tohoto minitestu nebylo ověřovat znalosti, na to v něm bylo příliš málo otázek a příliš mnoho „chytáků“, nýbrž předvést možnosti kaskádových stylů. Na mnoho věcí se dnes používá JavaScript, přitom tytéž věci by šlo mnohem jednodušeji a efektivněji provést přes CSS, tedy samozřejmě nebýt IE. Nicméně to vypadá, že brzy i s IE, Microsoft se snaží.

A jak to s tím :checked vlastně funguje? Na minitest byly použity maličko složitější CSS konstrukce. Zde je popsán naprosto jednoduchý příklad, princip ovšem zůstává stejný.

HTML kód:
<input type="checkbox" name="tip" id="tip">
<label for="tip"> Zobrazit tip pro dnešní den</label>
<br><strong>Chvilku si schrupněte!</strong>

CSS kód:
#tip+*+*+strong {visibility: hidden}
#tip:checked+*+*+strong {visibility: visible}

Jistě jste si všimli, že v HTML kódu bylo použito návěstí label. Díky tomu radychtivý uživatel nemusí klikat přímo na zaškrtávací políčko. Když klikne na text návěstí, které je přes atributut for navázáno na daný formulářový prvek, dosáhne stejného účinku. Teoreticky by tedy zaškrtávací políčko ani nemuselo být zobrazeno, jenže potom by zas nebyl zřejmý jeho aktuální stav.

Zobrazit tip pro dnešní den
Chvilku si schrupněte!

Zdroje

• Test selektorů

Neprehliadnite:

• Akcie, letáky a zľavy
• Pôžičky a úvery pre všetkých
• Turistický sprievodca Budapešťou
• Turistický sprievodca Košicami
• Turistický sprievodca Londýnom
• Turistický sprievodca Prahou
• Turistický sprievodca Viedňou
• Turistický sprievodca Slovenskom

Pozrite si tiež:

«  Najľahší telefón na svete

Mininova testuje vysielanie videa  »