Používáte unikátní “id” Vašeho webu?

MyEgo.cz

Používáte unikátní “id” Vašeho webu?

Webdesign, CMS 17.11.04

Mozilla verze 1.8b2 nativně, a Firefox 1.0 s podporou URIid extension, podporují automatické unikátní id v body tagu a na něj navázané user stylesheets (uživatelské CSS). Opera 7.60 (a nižší verze) je podporuje již dávno, více než 5 let, od verze 4.0 (!).

K čemu je dobrá unikátní identifikace webu?

K čemu to je dobré? Profesionální uživatel si potom může přizpůsobit, pomocí speciálního CSS souboru, vzhled webů, které často navštěvuje, a kde mu něco vadí, nebo chce cokoliv pro sebe zlepšit (třeba tmavé pozadí zaměnit za bílé), právě pomocí uživatelského CSS.

Nicméně, problém je v tom, že uživatelské CSS je v Opeře, Firefoxu, i Mozille jen jedno. Nemůžete tedy napsat toto, protože by potom každý web, který navštívíme, měl bílé pozadí:

body {background:white}

Řešením je přidat body tagu unikátní id identifikátor, který je obrazem URL, s . zaměněnou za -, což právě dělá Mozilla 1.8b2 nativně, v XHTML to tedy pro můj web bude vypadat takto:

Potom již můžete ve Vašem uživatelském CSS, společném pro všechny weby, psát toto, a promítne se to jen na webu mém:

body#hulan-info-blog {background:white}

Mozilla 1.8b2 umí id přidávat, na základě přepínače, do body tagu automaticky, Firefox na základě zmíněné URLid extension. Výborná funkce! Problém je ovšem, že id doplňuje, dle mého názoru, chybně do body, stylovat je totiž možné i html tag!

BLOG:CMS, nejlepší redakční systém, obsahuje plugin NP_Signature, který nedělá nic jiného, než právě do tagu html toto id automaticky přidá (podívejte se do zdrojových kódů tohoto webu). Každá instalace webu na BLOG:CMS je tak profesionálním uživatelem / čtenářem jednoduše přizpůsobitelná.

Kde si nastavit User CSS?

V Opeře si lokaci User CSS můžete zvolit přímo v nastavení, standardně je tam adresář (opera)/profile/styles/user.css, v případě Firefoxu a Mozilly je to v (firefox-profil)/chrome/userContent.css.

Nicméně, vše toto je k ničemu, pokud Váš web nemá unikátní id tag v html, nebo alespoň v body! Takže, pokud jej tam ještě nemáte, doplňte si jej, je to dobré nejen pro čtenáře, ale i z hlediska přístupnosti!

Jak s použitím User CSS může potom vypadat třeba můj Gmail (via persistent.info)?

Komentáře

1 Oswald 17.11.04, 12:11:56

Nicméně, problém je v tom, že uživatelské CSS je v Opeře, Firefoxu, i Mozille jen jedno.
V Opeře je možné mít uživatelských CSS libovolné množství a lze je podle potřeby zapínat/vypínat.
http://my.opera.com/community/tips/windows/customizing/008.dml
2 Radek Hulán 17.11.04, 01:11:01

[1] to samozřejmě ano, vždyť taky Operu 7.60P3 používám, Opera je pro profíky, Firefox pro masy, nicméně, osobně se mi do přepínání moc nechce, podporovat id a mít jeden user stylesheet je mnohem pohodlnější..
3 mirrda 17.11.04, 03:11:02

To je chytré! Už vím, proč má pixy v body id="pixy-cz". Díky.
4 Ján "johno" Suchal 17.11.04, 11:11:33

No toto sa už dávno riešilo. Marek Prokop, Pixy, Marek Prokop kontruje.
Osobne proti tomu nič nemám, ale posledné čo by sa mi chcelo robiť je CSSko pre každý druhý web, na ktorom sa mi niečo nezdá.
5 Radek Hulán 17.11.04, 12:11:49

[4] pokud ten web čteš často, tak je to otázka jedné minuty si jej mírně upravit k obrazu svému.. ;)
6 Mlog 17.11.04, 03:11:25

Existuje rozsireni: URIid ktere to hezky resi. A kdyz si prectes TOHLE zjistis, ze alfa verze Mozilly umi @pravidla...
Podobne tema.
7 Mlog 17.11.04, 03:11:27

Hups ten prvni odstavecek jsem jaksi prehledl ;)
Omlouvam se.
8 Radek Hulán 17.11.04, 07:11:24

[6] to nám tu opravdu chybělo, pseudo-tagy Mozilly ;) Ono to jde i bez nich, a v Opeře už léta.. :-)
9 llook 17.11.04, 11:11:42

[8] Na tom, že někdo v Gecko prohlížečích používá @-pravidla pro Gecko prohlížeče, já nevidím nic špatného.
V článku mě ale zaujalo něco jiného, když se zamyslím nad významem slova profesionální. Co je to "profesionální uživatel"?
10 Honza 18.11.04, 12:11:01

Pokud jsem to pochopil dobře, tak toto rozšíření přidá ono ID do BODY samo. Nevím proč, ale u mne se nic neděje. Podíval jsem se na váš weblog i na google.com - a BODY bez ID. Verzi rozšíření mám 0.0.7.4, Firefox 1.0 (po instalaci rozšíření jsem FF restartoval :-) ) Ještě se musí někde něco nastavit? Nebo jsem to celé nepochopil a mám vrátit maturitní vysvědčení?
11 Mlog 18.11.04, 02:11:16

Ted myslis temi pseudo-tagy jen ty @ zavinacova pravidla?
Nebo i -moz? Jestli mysli i ty tak Opera ma -o akorat si ted nejsem jisty jestli je to jen pro skin nebo i pro nativni pouziti na webu ;)
12 Petr Dvorský 19.11.04, 09:11:25

rADo:
body#hulan-info-blog {background:white}
To jste to testoval pro URIid extension ?
Ale i tak mi to není moc jasné, jasné mi je, že URIid přidává #hulan-info-blog do tagu body, ale i tak musíte do CSS stylu napsat:
body#hulan-info-blog {background:white !important}, aji na URIid extension mají ten příklad správně:
body#www-google-com { background-color: #ddf !important; }. [!important]
Dále, ale to je asi tím, že jste to zkoušel v Firefoxu.
body#hulan-info-blog {background:white}.
Ale (už zase:) když se v článku zmiňujete, že Váš BLOG:CMS přídává atribut id do tagu html automaticky, by jste mohl příklad uvést pro ono zmíňěné html.
Ono by to masy mohlo mást:)
Takže u mě to vypadá takhle:
html#hulan-info-blog {background: #5B94DC !important}
13 Mlog 20.11.04, 05:11:50

Firefox na základě zmíněné URLid extension. Výborná funkce! Problém je ovšem, že id doplňuje, dle mého názoru, chybně do body, stylovat je totiž možné i html tag!
TAK Proc to nenapises autorovi? Nemel by to byt vubec problem doplnit. Rekl bych, ze je to lepsi nez tady psat, ze do tagu html to nedoplnuje... :)

Twitter	Facebook
Instagram	LinkedIn

Používáte unikátní “id” Vašeho webu?

MyEgo.cz