Štítek: css

Pokud jste odpověděli na druhou část dotazu kladně, možná by se vám hodila některá z karet VisiBone:

• VisiBone HTML / CSS
• VisoBone JavaScript
• VisiBone Color Products
• a další…

Karty jsou přehledné a pěkně graficky zpracované, najdete na nich takové věci jako je (ne)kompatibilita jednotlivých vlastností CSS v různých prohlížečích a přehled všech vlastností a hodnot dané CSS vlastnosti.

Mě hodně zaujal kompletní balík „taháků“ – VisiBone Browser Book a –vážně přemýšlím, že si ho objednám– ++už se těším až mi tohle kompletní balení taháků dorazí domů++.

Nemáte zbytečných 10 – 35$?

Nevadí ;-) můžete použít online aplikaci VisiBone popups a další, viz titulní stránka VisiBone, níže na stránce, pod nadpisem Free Online Services.

TIP: Pavel Kout

Určitě to všichni znáte a já samozřejmě také, ale nikde jsem nemohl vygooglit všechny čtyři známé finty pro náhradu čtyř CSS vlastností (max-width, min-width, max-height a min-height), které nepodporuje Internet Explorer.

Pavel Kout mě naštěstí zachránil a jeho tip mě nakopl správným směrem. Pro jistotu jsem se rozhodl, abych zase nezapoměl, že si vše raději poznamenám.

Níže naleznete konstrukce, které zajišťují (díky microsoftímu expressions) aby zmíněné CSS vlastnosti správně použil jak Internet Explorer tak i „normální“ prohlížeč.

Použitý zdroj je samozřejmě článek – max-width in Internet Explorer (Svend Tofte).

max-width

max-width: 800px;width: expression(do­cument.body.cli­entWidth > 800? „800px“ : „auto“ );

min-width

min-width: 800px;width: expression(do­cument.body.cli­entWidth < 800? „800px“ : „auto“ );

max-height

max-height: 300px;height: expression(this­.scrollHeight > 300? „300px“ : „auto“ );overflow: hidden;

min-height

min-height: 300px;height: expression(this­.scrollHeight < 300? „300px“ : „auto“ );overflow: visible;

Související:

• max-width in Internet Explorer – (Svend Tofte, 20.8.2003)
• Myslete elasticky s CSS – (Interval, Martin Snížek, 9.8.2004)
• Šířka stránek: fixní, natahovací, nebo jiná? Jaká jiná? – (Pixylophone, Petr Staníček, 17.5.2004)
• Jak psát web – CSS

Nedávno psal Yuhů a další (viz odkazy) o knize Andrew B. Kinga Zrychlete své WWW stránky!. Jsem přibližně v polovině a nad kapitolou Optimalizace CSS mě tak svrběly prsty, že mi to nedalo a podíval se na svůj CSS soubor. Cílem podívání bylo jej zmenšit, při čtení knihy jsem totiž nabyl dojmu, že vše jde zkrátit nebo zmenšit o polovinu a soubory se styly nejsou vyjímkou.

Nejprve jsem použil techniku, o které se zmínil Petr Weida, tedy odstranění prázdných řádek, formátování souboru a odstranění komentářů. Soubor se mi smrskl o cca 42%, viz tabulka zcela dole, již v tuto chvíli jsem mohl být spokojen.

Autor knihy, ale nabízí také další techniky, které jsem aplikoval dále:

1. odstraňte prázdná místa (již jsem provedl)
2. odstraňte komentáře (již jsem provedl)
3. minimalizujte HTTP požadavky (používejte jen jeden CSS soubor)
4. krátké názvy selektorů class a id
5. používejte skupinové selektory a deklarace
6. využívejte maximálně dědičnosti

Vypustil jsem ještě několik již nepotřebných deklarací a zjednodušil některé CSS konstrukce. Například místo zápisu

background-color: #ee9e22;background-image: url(„/img/tovar­na.gif“);backgrou­nd-position: right top;background-repeat: no-repeat;

… jsem použil zkrácené zápisy, které autor také doporučuje:

background:#ee9e22 url(„/img/tovar­na.gif“) right top no-repeat;

…. a následovaly úpravy s využitím dědičnosti a odstranění zdvojených definic téhož. Výsledek byl na světě.

Přehled úprav velikosti CSS:

• původně: 8,22 kB (8427 bajtů), 8429 znaků
• komprimováno: 4,79 kB (4909 bajtů), 4933 znaků = úspora 42%
• + optimalizované CSS: 3,40 kB (3490 bajtů), 3492 znaků = úspora 59%

Určitě si řeknete, že ten původní soubor musel vypadat, ale o to nejde. Určitě nejsem sám komu oprášení definice stylů pomůže a výsledkem budou nejen rychleji se načítající stránky, ale hlavně spokojení uživatelé.

Až knihu dočtu, možná si z ní na Vás ještě něco vyzkouším.

Související:

• Online komprimace CSS – (Petr Weida, About weblog, 7.5.2004)
• Kniha o rychlosti stránek – (Dušan Janovský, Yuhůův weblog o webu, 29.4.2004)
• Andrew B. King: Zrychlete své WWW stránky – (Milan Kryl, Kryl Blog, 11.5.2004)
• Zrychlete své WWW stránky! – (Vilém Málek, Interval, 13.5.2004)
• Zrychlete své WWW stránky! – (Nakladatelství ZonerPress)

Nedávno, když Chris Hester na světlo světa vypustil CSS pastelky, tak jsem si neodpustil potměšilé rýpnutí, že se jedná o výtvor bez tvůrčí invence a podobně. Také jsem si říkal, že je to snadné, když má člověk po ruce program, který CSS pastelky vytvořil podle předlohy.

Nedalo mi to a pokusil jsem se podobný nástroj vytvořit vlastní silou. Programátor nejsem valný, ale načíst obrázek a vygenerovat pár (víc) DIVů + CSS soubor, není zase tak těžké. Výsledkem je převodník obrázků do CSS, zatím ve verzi beta (testujícím děkuji za pomoc).

Generuje se statický CSS a XHTML soubor, vygenerované soubory budu asi časem mazat. Kód je silně inspirován již zmíněnými pastelkami a od toho se odvíjí také kompaktibilita. Opera a Gecko bez problémů, Internet Explorer má potíže s počtem DIVů u obrázků tesně kolem maximálně povolené velikosti v CSS generátoru (150×150px).

Berte prosím tento převodník obrázků jako malou hříčku, jako znásilnění technologie, nebo jak je vám jen libo :-)

Související:

• CSS pastelky – (Chris Hester)
• CSS lampa – (Jan Bien)
• Pomocí CSS na malůvky – (Jiří Chomát, Články, 18.1.2004)
• Medvědí služba CSS stylům – (Dušan Janovský, Yuhůův weblog o webu, 17.1.2004)
• CSS pastelky – (Jan Bien, WEBLOG Mraveniště, 17.1.2004)
• CSS tužka – (Petr Weida, About Weblog, 17.1.2004)

Vítek Dlouhý se v obsáhlém článku móda miniaturního písma, zabývá překážkami, které nutí překonávat své návštěvníky některé servery, používající na svých stránkách příliš malého písma.

Miniaturní písma snižují přístupnost stránek a pokud jsou definovány v pixelech (px) tak dokonce znemožňují zvětšit písmo návštěvníkům s Internet Explorerem.

Vítek také varuje před globálním zvětšováním písma v prohlížeči, které může způsobit, při přechodu z webu s miniaturním písmem na web se správně definovanou velikostí písma, problémy právě v rozdílu zobrazované velikosti fontů. V takovém případě se písmo skokově zmenší nebo zvětší.

Osobně nenastavuji v prohlížeči výchozí velikost písma, ale velikost písma minimální. Podle mého názoru je to při uživatelově povědomí co vlastně dělá rozumné řešení.

Související:

• Móda miniaturního písma – (Vítek Dlouhý, Dlouhý web, 26.4.2004)

Nestylujte formuláře! radí Vítek Dlouhý a argumentuje tím, že prohlížeč by si měl přebírat vzhled, formulářových prvků, z GUI operačního systému.

Související:

• Nestylujte formuláře! – (Vítek Dlouhý, Dlouhý web, 20.4.2004)
• Stylování formulářových prvků. Ehm. – (Petr Staníček, Pixylophone, 28.11.2003)

Na Intervalu dnes najdete článek o přepínání alternativních stylů pomocí JavaScriptu. Velmi pěkný způsob, který je pochopitelně funkční jen při zapnutém skriptování na straně klienta.

Pokud budu mít víc času, vytvořím alternativní styl i pro tento weblog, ale možná spíš použiji podobné řešení jako Pixy.

Související:

• Alternativní styly – změna stylu pomocí JavaScriptu – (Jan Dudek, Interval, 7.4.2003)
• Alternativní styly – seriál – (Jan Dudek, Interval)
• Alternativní styly pomocí JavaScriptu – (Petr Weida, About Weblog, 7.4.2004)
• PHP přepínač stylů – (Petr Staníček, Pixylophone, 7.11.2003)

Vítek Dlouhý mi svým článkem Tisk webových stránek, připoměl a možná nejen mě, že jsem se ještě nedostal k vytvoření CSS předpisu pro tisk stránek tohoto blogu.

V tuto chvíli zde již najdete vytvořený styl pro @media print, který skrývá menu stránek, má nastavenu velikost fontu na 13pt, odkazy v těle článku obsahují pseudo třídu a:after, pro vytištění parametru href, za odkaz, do hranaté závorky.

Určitě by se ještě dalo pohrát s konstrukcemi page-break-after a page-break-before, ale myslím, že v této podobě je to plně postačující. Další informace najdete, třeba v článcích na Intervalu, dole v odkazech.

Související:

• Tisk webových stránek – (Vít Dlouhý, Dlouhý Web, 17.3.2004)
• Formátování dokumentů pro tisk pomocí CSS I – (Jan Dudek, Interval, 19.3.2003)
• Formátování dokumentů pro tisk pomocí CSS II – (Jan Dudek, Interval, 24.3.2003)

Petr Bříza na Intervalu vydal poslední díl seriálu, o výběru vhodného layoutu pro webové stránky, Tvorba layoutu webu – praktický přehled

O seriálu už jsem tady psal a ani další díl mě nezklamal. Autor se rozepsal o testování layoutu, o správném postupu psaní CSS kódu, navigačních prvcích a o dalších, na pohled samozřejmých, součástech každé webové stránky.

Související:

• Tvorba layoutu webu – praktický přehled Petr Bříza, Interval, 17.3.2004)
• Sestavujeme layout webu – (Petr Weida, About Weblog, 17.3.2004)

Právě o to se pře Dušan Janovský a David Špinar, vše se točí kolem weblogu Přístupnost a nahrazení textového nadpisu logem.

Výsledkem diskuze je starší Pixyho řešení, které stále vítězí a je aplikovatelné univerzálně.

Související (update):

• Snižuje FIR opravdu přístupnost? – (Marek Prokop, Sova v síti, 5.3.2004)
• Yuhůů kritizuje Fahrner Image Replacement – (David Špinar, Přístupnost, 4.3.2004)
• Nejmodernější chyba přístupnosti – (Dušan Janovský, Yuhůův weblog o webu, 4.3.2004)
• Obrázkové odkazy s CSS 2 – (Petr Staníček, Pixylophone, 2.2003)
• Obrázkové odkazy s CSS 1 – (Petr Staníček, Pixylophone, 2.2003)