Z archívu: Ako na validné CSS aj s nevalidnými vlastnosťami

Trocha teórie

Moderné prehliadače webových stránok obsahujú takmer plnú podporu kaskádových štýlov - CSS, znamená to, že dokážu spracovať väčšinu (neexistuje prehliadač, ktorý by zvládol 100%) vlastností CSS, ktoré sú schválené v CSS špecifikácií vydanej W3C. Posledná vydaná špecifikácia je CSS 2.1, pripravuje sa ale už jej tretia verzia (resp. tretí level).

Takisto existujú aj vlastnosti CSS, ktoré neboli špecifikované konzorciom W3C, ale špecifikovali ich dodávatelia UA programov, teda programov, ktoré interpretujú webové dokumenty, tzv. užívateľských agentov. UA programy sú napríklad internetové prehliadače, hlasové čítačky, atď. Samozrejme, keďže tieto rozširujúce vlastnosti nie sú definované vo W3C norme, nie sú ani validné. Napriek tomu vám však fungovať budú, ale s obmedzením na daný prehliadač.

Takéto rozširujúce vlastnosti musia byť podľa CSS špecifikácie jasne odlišné, znamená to, že by mali začínať pomlčkou "-" (alebo podtržníkom "_"), aby sa odlíšili od štandardných vlastností, za ktorou nasleduje reťazec definujúci výrobcu programu, pre ktorý je daná vlastnosť vyvinutá.

Rozširujúce CSS vlastnosti od Opera Software sa začínajú prefixom -o- (napríklad -o-link alebo -o-replace) alebo od Mozilla Foundation prefixom -moz- (napríklad -moz-border-radius, či -moz-binding). Spoločnosť Microsoft vytvorila takéto rozširujúce vlastnosti ešte pred špecifikáciou tohto názvoslovia a začala pridávať k svojim CSS vlastnostiam prefixy mso- (ktoré sú známe z generovania HTML stránok programom MS Word) alebo žiadne (tieto vlastnosti sa podobajú na vlastnosti W3C, napríklad scrollbar-track-color, či filter).

Niektoré vlastnosti primárne vyvinuté pre jeden druh internetového prehliadača, môžu byť funkčné aj v prehliadači inom - je to ale už vec konkrétnych vývojárov (napr. niektoré MSIE štýly fungujú aj v Opere, či v Konquerori). Presne špecifikovať jednotlivé vlastnosti štýlov tu teraz nebudem, ukážem vám ako tieto vlastnosti v dokumente použiť bez toho, aby kvôli nim validátor nevypisoval chyby.

Keďže na pridanie štýlu použijeme JavaScript, je dôležité, aby bola webová stránka prístupná a plne funkčná aj v prípade, že tieto vlastnosti definované nie sú. Nechceme predsa spôsobovať problémy užívateľom s vypnutým JavaScriptom.

A teraz prax

Štýly sa dajú JavaScriptom definovať (alebo priradzovať) viacerými spôsobmi (podrobnejšie je rozpísané ďalej):

• DOM (objektový model dokumentu) objektom style, ktorému definujeme požadovanú CSS vlastnosť napr. this.style.width = "200px"; (viď. nižšie).
• pomocou metódy setProperty(), napr. this.style.setProperty("width","200px",null);. Túto funkciu ale nepodporuje MSIE.
• pre MSIE metódou addRule(), napr. document.styleSheets[1].addRule("div","width:200px");. Funguje iba v MSIE a nevýhodou je, že vlastnosti sa dajú HTML elementom pridávať len globálne - v tomto prípade priradíme všetkým elementom DIV šírku 200px.

V prvom prípade takto môžme definovať len CSS vlastnosti, ktoré majú svoj ekvivalent v objektovom modeli dokumentu, tzv. DOM (viď. príklad 1.). Tu je zoznam vlastností CSS v objektovom modeli v

• prehliadačoch s jadrom Gecko (Mozilla, Mozilla Firefox, Netscape)
• prehliadači Opera
• prehliadači Microsoft Internet Explorer + objekt Style pre HTML elementy.

Pozor! Všetky CSS vlastnosti DOM sú case-sensitive, t.j. rozlišujú sa malé a veľké písmená!

V prípade, že daná CSS vlastnosť svoj ekvivalent v DOM nemá, je nutné ho priradiť JS metódou, teda napríklad funkciou setProperty() a v prípade MSIE funkciou addRule(). Obe majú svoje klady a zápory - setProperty() priradzuje CSS vlastnosti každému elementu zvlášť, zatiaľčo addRule() priradzuje vlastnosti všetkým elementom naraz (podobne ako ich definujeme v CSS súbore).

Príklad

Pozn.: tieto príklady sú len ilustračné a nemusia fungovať správne vo všetkých prehliadačoch, v bežných podmienkach je možné dané riešenie previesť inak, alebo, z hľadiska prístupnosti, neriešiť vôbec.

Príklad 1.: Chceme prisposobiť šírku elementu DIV s id="stranka" rozlíšeniu užívateľa. Kód JavaScriptu bude vyzerať napríklad takto:

function ResizeBox() {
  if (document.documentElement.clientWidth <= 800) { // zistime si sirku okna
    // a pomocou objektu style definujeme prvku s id='stranka' novu sirku:     document.getElementById('stranka').style.width = '770px';     // zaroven zmenime aj jeho farbu pozadia:     document.getElementById('stranka').style.backgroundColor = '#aaa';
  }
  else {
    document.getElementById('stranka').style.width = '990px';
  }
}

// pri nacitani okna zmenime sirku elementu:
window.onload = ResizeBox; 

To bola demonštrácia príkladu v prípade, že daná CSS vlastnosť má v objektovom modeli svoj ekvivalent - všimnite si vlastnosť backgroundColor, ktorá je ekvivalentom k CSS vlastnosti background-color.

Príklad 2.: Chceme všetkým elementom DIV s class="radius" priradiť vlastnosť špecifikovanú Mozilla Foundation -moz-border-radius:

function BorderRadius() {
  // zistime, ci dana funkcia je pristupna   if (document.getElementsByTagName('div')) {
    // prejdeme kazdy element DIV a skontrolujeme nazov triedy     for (i=0; (doc = document.getElementsByTagName('div')[i]); i++) {
      if (doc.className == 'radius') {
        doc.style.setProperty("-moz-border-radius","10px",null);
      }
    }
  }
}

window.onload = BorderRadius;

Tento príklad nebude fungovať v MSIE (samozrejme zmena - zaoblenie rohov sa prejaví len v Mozille), pre tento prehliadač je nutné použiť funkciu addRule, napr:

function ScrollBarColors() {
  // definujeme farby posuvníka:   document.styleSheets[1].addRule("body", "scrollbar-face-color: red");
  .
  .
  .
  atď.
}

window.onload = ScrollBarColors;

V konečnom dôsledku už záleží na vás, aké riešenie zvolíte na svojej web-stránke. V tomto prípade je nutná aspoň mierne pokročilá znalosť JavaScriptu a samozrejme aj CSS. JavaScript je len doplnkom pre webové stránky a tak by sa mal aj používať - v prvom rade je dôležité myslieť na to, že výpočty sa prevádzajú na strane klienta a teda stránka, ktorá obsahuje takýchto skriptov príliš veľa môže spôsobiť problémy užívateľovi s pomalším počítačom.

Zároveň, ako som už spomínal, je dôležité prihliadať na fakt, že stále existuje percento vašich návštevníkov, ktorí JavaScript majú zakázaný a preto by sa ním nemali generovať prvky, ktorých nefunkčnosť môže zneprístupniť vašu stránku.

Tomáš Gluchman (http:gluchman.sk)