Mibrt Blog | Blog píše Michal Brtníček, webdesign a Apple, html, css, php - HTML a CSS

Už se vám stalo, že jste nakodovali web a vše jelo ve všech prohlížečích stejně? Že ano? I v internet exploreru? Štípněte mě :-) Pokud se najdou některé odchylky, je třeba je odladit a prohlížeče odlišit. Existují zde například podmíněné komentáře, ale těch nejsem moc velký fanoušek, protože potom vzniká několik zbytečných stylů. Dalším řešením je zjistit si prohlížeč v php a dát special třídu přímo body, ale raději vždy oželím validnost css a použiju některý z css hacků a zápisů. Ukážu dneska ty, co znám.

Internet Explorer 6

* html .trida {
	color: #FFFFFF;
}

Internet Explorer 7

*:first-child+html .trida {
	color: #F1F1F1;
}

nebo kratší zápis

*+html .trida {
	color: #F2F2F2;
}

Internet Explorer 8

.trida {
	color: #F3F3F3\0/;
}

Kompletní odlazení toho super prohlížeče

.trida {color: #F0F0F0;} /* pro všechny prohlížeče */
* html .trida {color: #FFFFFF;} /* pro Internet Explorer 6 */
*+html .trida {color: #F1F1F1;} /* pro Internet Explorer 7 */
.trida {color: #F2F2F2\0/;} /* pro Internet Explorer 8 */

Opera

html:first-child .trida {
	color: #F4F4F4;
}

Pokud znáte některé další "triky", podělte se s nimi prosím v komentářích, rád si rozšířím obzory, děkuji :-)

Tato "funkce" se nachází v téměř všech moderních prohlížečích a spočívá v tom, že prohlížeč kolem odkazu, na který se kliklo, nebo na který jste se dostali stiskem klávesy TAB, udělá tečkovaný border. Pro lepší představu přikládám ukázku, jak nehezky to vypadá v reálu.

Mnohdy se ale stává, že vytvoříme tlačítko, které má pouze JavaScriptovou událost a v tu chvíli se nám neprovede refresh stránky a taky pro tuto akci je graficky nepěkné, když nám již zmiňovaný tečkovaný border kolem odkazu zůstane. Osobně pro každý projekt/web/aplikaci globálně zakazuju tuto vlastnost následujícím zapisem v CSS.

* a {
  outline: none;
}

Vy ji ale samozřejmě můžete použít v rámci dědičnosti nebo jen pro určitou třídu či identifikátor, jak jste zvyklí.

Pokud se věnujete tvorbě webových stránek, určitě se vám nejednou stalo, že jste potřebovali označit odkaz, který vede na jiné umístění, než je na vašich stránkách nebo jste jen potřebovali označkovat odkaz podle typu cíle, na který odkazujete. Na toto existuje spousta JavaScriptů, spousta frameworků a v neposlední řadě spousta řešení pomocí php. My se ale dnes podíváme na jednu z jednodušších a řekl bych i jednu z nejefektivnějších variant, jak toho docílit jednoduše jen za pomocí CSS. Mnoho lidí tuto metodu nezná nebo se s ní zatím nesetkali, proto si ji dnes popíšeme.

Nutno dodat, že následující řešení není podporováno v prohlížeči IE6 (překvápko jako hrom ), ale nejedná se zase až tak o ztěžejní funkci, která by pro tento zastaralý a dnes již méně využívaný prohlížeč (samozřejmě podle zaměření daného webu) měla být odladěna. Odladit tuto funkci i pro IE6 sice jde (třeba vlastní třídou), to by ale nebylo plně automatizované, což my nechceme.

Externí odkaz

Pokud potřebujeme označkovat externí odkaz, který míří ven z našeho webu, budeme předpokládat, že je to každý odkaz, který začína na http://. Zápis CSS bude vypadat následovně:

a[href^="http:"] {
	background: url('/images/externalLink.gif') no-repeat right top;
	padding-right: 10px;
}

Zároveň se ale dá předpokládat to, že můžeme pomocí absolutní adresy směrovat odkazy i na náš web a v tu chvíli nechceme nijak odkaz odlišovat, i když začíná na http://. Tento případ ošetříme úplně jednoduše zápisem:

a[href^="http://www.vasestranka.cz"],
a[href^="http://vasestranka.com"] {
	background-image: none !important;
	padding-right: 0;
}

Odkazy, které nechceme nijak odlišovat (napadají mě snad jen placené reklamy) a splňují výše uvedený parametr, vynulujeme jednoduše, jak jsme zvyklí:

.no_exter {
	background-image: none !important;
	padding: 0;
}

Odkazy podle typu

Další případ, kdy můžeme tohoto využít, jsou odkazy, u nichž přesně určujeme typ nebo příponu. Zápis pro odlišení odkazů na e-mailovou adresu může vypadat takto:

a[href^="mailto:"] {
	background:url('/images/email_link.png') no-repeat right top;
	padding-right: 22px;
	padding-bottom: 5px;
}

Pro .pdf, .doc nebo třeba .rss můžeme použít následujícího zápisu:

a[href$=".pdf"] {
	background:url('/images/page_pdf.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

a[href$=".doc"] {
	background:url('/images/page_word.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

a[href$=".rss"], a[href$=".rdf"] {
	background:url('/images/feed.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

Další využití a možnosti jistě najdete sami podle těchto předloh. Zajímalo by mě, jestli jste tuto metodu znali, jestli ji používáte nebo používáte jinou vámi osvědčenou metodu. Těším se na komentáře.

Na diskusních forech se poslední dobou vyskytují čím dál častěji dotazy, jak co nejlépe nastavit u div zaoblené rohy. Tato fičůrka se určitě dá vytvořit více způsoby, ale dnes si probereme snad tu nejjednodušší a nejuniverzálněší možnost.

Co budeme potřebovat:

6x div
4x obrázek zakulaceného rožku

Připravíme si 4 obrázky, které budou sloužit jako rožky pro náš výtvor. Kvůli kompatibility s IE6, který nepodporuje alfa kanál u obrázku .png, nebudou naše rožky s průhledným pozadím, proto jako pozadí rožků zvolíme pozadí stránky, což bude v našem případě bílá barva.

HTML struktura

Nyní si napíšeme kod, jak to bude vypadat v našem html dokumentu.

<div class="obdelnik">
	<div class="vrch"><div>div>div>
	<div class="stred">obsah našeho čtverečku může být jakkoliv veliký, čtvereček se nám bude roztahovat a nemusíme jej dál editovatdiv>
	<div class="spodek"><div>div>div>
div>

CSS

No a nyní té změti divů dodáme pomocí CSS život a řekneme jim, jak se mají chovat:

.obdelnik {
	width: 200px;
	background-color: #CCDDE2;
	margin: 20px;
	padding: 0px;
}

.vrch , .spodek , .vrch div , .spodek div {

	margin: 0px;
	padding: 0px;
	background-repeat: no-repeat;
	width: 100%;
	height: 9px;
	font-size: 1px; /// kvůli IE6 je třeba nízkým divům nastavit malé písmo
}

.vrch div , .spodek div {
background-position: right top;
}

.vrch , spodek {
	background-position: left top;
}


.stred {
	color: #000000;
	padding: 10px;
	margin: 0px;
}

.vrch {background-image: url(1.png);}
.vrch div {background-image: url(2.png);}
.spodek {background-image: url(3.png);}
.spodek div {background-image: url(4.png);}

Závěrem

Tady tento postup je kompatibilní s IE6, IE7, Firefoxem, Operou a určitě i v dalších browserech. Výsledek si můžete zobrazit zde. Pokud máte k postupu dotazy nebo návrhy, tak se nebojte vyjádřit v komentářích.