Archiv rubriky „CSS, HTML“
CSS3 slabikář - ACCELERATOR
Jelikož čas v kaskádových stylech pokročil na CSS3, napadlo mě vytvořit takový pokus o jakýsi slabikář. Uvést zde postupně všechny vlastnosti nových stylů, jejich stručnou implementaci a hlavně jejjich funkčnost či nefunkčnost v prohlížečích.
Úkol je to nesnadný, neboť těch vlastností je mnoho a mnoho, no snad to nějak zvládnu. 
U každého slabikáře uvedu datum testování vlastnosti a také samozřejmě na jakých prohlížečích bylo testováno. Tak tedy pojďme na to.
Na pověstný paškál jsem si vzal zcela novou vlastnost obsaženou v CSS3 a to vlastnost accelerator :
Typ vlastnosti: accelerator:
Typ zkoušeného prohlížeče: Microsoft Internet Explorer 8.0.6001
Datum zkoušky: 12.7.2009
Tato vlastnost je velmi prapodivná, v kaskádovkách jsme se s ní zatím nesetkali. “Základní pravidlo praví, že když najdeš něco podivného podezřívej z toho Microsoft” :),i když jsem to původně myslel jen nadneseně, tak jsem se skutečně trefil.
Je tu opět nová vlastnost pro produkty Microsoftu. Funguje pro IE 5.5+ a vyšší.
Nejlepší bude, když začnu výklad na příkladu z operačního systému, něco podobného totiž nabízí CSS3 také ve světě tvorby webu:
Pokud například ve Windows od verze 2000 stisknu kláves ALT tak se mi podtržením označí písmenko, které když stisknu vykoná se určitá činnost. Akcelerátor vyvolaný stiskem klávesy ALT zvýrazní příslušná tlačítka, člověk tak ví jaká jsou aktivní písmena pro různé akce, je to taková malá nápověda. Pokud si však v systému či prohlížeči možnost zvýraznění akčních písmenek vypnete tak po stisku klávesy ALT se nic nezvýrazní.
Prostě po zmáčknutí tlačítka ALT dojde ke zvýraznění písmenka, které má nastavené pseudo podtržení. Nejlépe toto zvýraznění funguje na podtržené elementy (v HTML na elementy, které mají nastavený tag <u></u>).
Možnými hodnotami jsou:
- true - element obsahuje písmenko s pseudo podtržením ,dojde tak podtržení příslušného písmenka, na které když zmáčkneme můžeme vyvolat nějakou akci
- false - element neobsahuje písmenko s pseudo podtržením ,nedojde tak podtržení příslušného písmenka, na které když zmáčkneme můžeme vyvolat nějakou akci
PŘÍKLAD POUŽITÍ:
<div><u style=”accelerator: true”>H</u>elp </div>
Předem se omlouvám za stručný příklad použití. Podle mého je to zase další microsoftí výtvor, který bude k ničemu, to je ale pouze můj názor a ve skutečnosti tomu tak být nemusí.
12. 7. 2009 | gisat_cz | 0
Zamyšlení nad kaskádovými styly a jednotou prohlížečů
Každý kdo se zabývá vytvářením webových aplikací ať již tzv. amatérsky či na profesionální úrovni jistě dozná že vývoj technik a nástrojů jde přímo milovými kroky. Tu tam jsou doby kdy k naprogramování stačily znalosti HTML. Dnes, pokud chcete něco pořádného vytvořit musíte například ovládat minimálně PHP, SQL, Javascript, AJAX a další.
Jediný smysluplný prostředek určený pro uspořádání vzhledu webové stránky je CSS, tedy Cascading Style Sheets neboli kaskádové styly. Věřte, že jsem se během své programátorské kariéry mnohdy zapotil při snaze sjednotit vzhled mého “podařeného” díla pro všechny rozříšené prohlížeče, tedy jmenovitě pro Operu, Firefox a Internet Explorer.
Bylo to způsobeno hlavně tím, že jednotlivé z výše vyjmenovaných prohlížečů podporovala část norem css , jiný zase měl speciální hodnoty pro sebe a další si jel podle svých pravidel. Tím nejvíce nenáviděným byl Microsoft Internet Explorer, sjednocovat web pro něj byla mnohdy procházka peklem. Naštestí lidstvo vymyslelo mnoho podvodů na slavné IEčko známé pod anglickým slovem Bug, ó bože jak mě často zachránil takový bug, pokud jsem nechtěl aby daná vlastnost určená jen pro IE nebyla přístupná pro jiný browser tak jsem tam dal bug a bylo po ptákách. Bylo to takové řešení neřešení. Ale co se dalo dělat v první skupině CSS označované číslem 1 se to hojně využívalo.
Jak jsem byl rád, když jsem si na zahraničním webu přečetl, že se chystá druhá řada. Očekávalo se od ní hodně, ale nakonec opět zklamala. IE si stále dělalo co chtělo. Při nastavování stejného vzhledu u IE jsem si připadal jako hráč v ruské ruletě, byla to taková soutěž kdo z koho. Většinou jsem se snažil abych vyhrál já, tedy pokud jsem chtěl získat moderní výdobytek společnosti, tedy ty zatracené penízky.
Pokud jste například chtěli nastavit průhlednost, či další blbinky museli jste sáhnout v IE po filtrech, které byly vidět jen v prohlížečích na bázi IE, ostatní měly zkrátka smůlu. Blíže ke specifikaci CSS2 se začal přibližovat firefox, svými -moz vlastnostmi se dalo nastavit více věcí , hlavně ty kulaté rohy, které jdou nastavit samozřejmě dobrou technikou i bez těchto zvláštních vlastností firefoxu, ale dá to více práce. No co se dá dělat CSS2 přispěla mnoha novými vlastnostmi, takže by se zdálo, že tvůrcův svět by mohl být lepší. Ale byl a vlastně stále ještě je klam.
Ten velký humbuk co Microsoft vyvolal nad Internet Explorerem 7, už jsem si myslel, že bude všechno v pořádku a konečně nic nebude brzdit mé nadšení. A ejhle sedmička také je ten samý krám jako předešlá verze. Byly v nich prvky CSS které dělaly novou paseku. Pomyslel jsem si, to se ten Microsoft tedy vytáhnul, v čem se to stalo lepší, že by se zlepšíl user interface? No nevím, to mě jako vývojáře moc neuspokojí. Opera se zlepšila a Firefox také. Bugy existovaly také i pro Operu, no sláva, takže vznikl další blázinec. Jaká z něj bude cesta?
Šel den za dnem , týden za týdnem a vyšly agenturní zprávy, že se pracuje na CSS3. Trochu nedůvěřivě jsem se jimi probíral. Těmi tunami informací, ostatně jak už to bývá, velmi málo jich bylo v mém mateřském jazyce. Skoro všechny byly v angličtině, no co se dá dělat. Opráším slovník a mé chabé znalosti tohoto způsobu domluvy a budu se vzdělávat v CSS3.
Po prostudování všech těch tun informací mohu říct jen jediné. CSS3 je zcela jiné, má mnoho nových vlastností, které by mohli udělat můj pracovní život lepším, krásnějším. Půjdou udělat stíny pod objekty, kulaté rohy, bude lepší práce se selektory, lepší práce s barvami. Ó jak je to super.
Při zjišťování podpory v současnosti, tzn. v červenci 2009 mi nezbývá konstatovat, že podpora je poněkud kostrbatá, ne všechny vlastnosti uvedené ve specifikaci CSS3 lze dnes aplikovat. A to nemluvím opět o jednotném způsobu grafické optimalizace pro všechny prohlížeče. IE si jde vlastní cestou, Opera také, snad jenom Firefox má nejlepší podporu nového, zatím posledního dílu kaskádových stylů.
Většina prohlížečů tvrdí, Internet Explorerem nevyjímaje, že svou podporu doladí a vše bude v pořádku. Mě a ostatním programujícím lidem nezbývá než věřit, že dojde k nápravě. Jsem však poněkud skeptický a myslím si, že to hned tak nebude.
12. 7. 2009 | gisat_cz | 3
Kaskádové styly - úvodem
Co je CSS?
Je to kolekce metod pro grafickou úpravu webových stránek.
Ta zkratka znamená Cascading Style Sheets, česky “kaskádové styly”. Kaskádové, protože se na sebe mohou vrstvit definice stylu.
Co nabízí kaskádové styly
Širší formátovací možnosti
CSS nabízí rozsáhlejší formátovací možnosti než samotné HTML.
Nejlépe je to vidět při vytváření stylů bloků textů.
Oddělení struktury a stylu
Jedním z nejvýznamnějších přínosů je oddělení struktury stránky
od stylu. Jazyk HTML je především určen pro popis struktury
hypertextového obsahu. Tentýž obsah je možné prezentovat v různých
podobách, například, jiný vzhled může mít stránka pro tisk, prezentaci
na webu,výstup projektoru a další.
Vyšší přístupnost dokumentů
Aplikací kaskádových stylů formou externích souborů, jak si v dalších
lekcích ukážeme, velmi zpřehledňuje kód HTML stránky a stránky se stávají
tím pádem přístupnějšími.
Dynamická práce se styly
Pokud skloubíme kaskádové styly společně například s PHP či javascriptem,
můžeme tak ovlivňovat vzhled stránky na základě určitých podmínek.
STRATEGIE POUŽITÍ CSS
Kaskádové styly lze použít různým způsobem a v různém rozsahu.
V praxi se nejčastěji uplatňuje tato strategie použití:
Obohacení formátovacích možností
Jedná se o nejrozšířenější způsob užití kaskádových stylů.
Základem je tradiční HTML či XHTML dokument se svými tagy,
Pomocí kaskádových stylů tagům přidáváme například barvu písma,
pozici v dokumentu a tak dále.
9. 7. 2009 | gisat_cz | 0
