Řešení individuálního nastavení CSS pro IE
Úvodem
Nejdříve bych se chtěl vrátit k mému minulému článku. Většina čtenářů, kteří přispěli komentářem asi špatně pochopili "- Správné zobrazení ve všech prohlížečích" - NEznamená STEJNÉ zobrazení ve všech prohlížečích.
A nyní k tomuto článku. Jsem si dobře vědom, jaké jsou problémy optimalizovat stránky minimálně pro tři nejpoužívanější prohlížeče - Opera, FireFox (Mozilla) a Internet Explorer, proto zde sepíšu několik možností, jak nakódovat css jen pro IE / ostatní.
Zápis html>body
Použijete-li v kaskádových stylech například místo klasického body, #menu, .menu atp. kód html>body #menu ... Opera i FF narozdíl od IE tento kód přijmou. Naštěstí je tento kód i validní, takže plně použitelný.
/* Pro všechny prohlížeče */
#menu {
display: block;
padding-left: 10px;
padding-top: 5px;
width: 650px; }
/* Mimo IE */
html>body #menu {
display: block;
padding-left: 10px;
padding-top: 5px;
width: 650px; }
Zápis *[href]
Další, ale složitější možnost, jak obejít prohlížeč Internet Explorer. Opět to tedy Opera a FireFox zobrazí a Internet Explorer to ignoruje, opět validní kód.
/* Pro všechny pohlížeče */
a {
color: #ffffff;
text-decoration: underline; }
a:hover {
color: #000000;
text-decoration: none; }
/* Mimo IE */
*[hover] {
color: #ffffff;
text-decoration: underline; }
*[href]:hover {
color: #000000;
text-decoration: none; }
Podtržítkový hack
Nyní pro změnu kód, který zobrazí jen IE. Tento kód se ale moc nepoužívá už z toho důvodu, že zápis neprojde validátorem.
/* Pro všechny prohlížeče */
#main {
padding: 0;
margin-left: 320px;
margin-top: 50px;
width: 570px; }
/* Jen pro Internet Explorer */
#main {
margin-left: 320px; /* Kódy se mohou prolínat - zobrazeno pro ostatní prohlížeče */
_margin-left: 350px; /* Dále jen IE* /
_margin-top: 30px;
_width: 600px; }
A nakonec podmínkový komentář
Neboli druhá možnost, jak nakódovat CSS jen pro Internet Explorer. Podmínkový komentář se vlkádá do hlavičky (header) stránky. Jak už vyplývá z níže uvedeného zápisu, tento způsob spočívá z dalšího externího css souboru. Tento zápis je také zcela validní.
/* Hlavička dokumentu */
<head>
...
<link media="screen" rel="StyleSheet" type="text/css" href="style.css" /> /* CSS soubor pro všechny styly obecně */
<!--[if IE]><link media="screen" rel="StyleSheet" type="text/css" href="ie.css" /><![endif] --> /* Jen IE styly */
</head>
/* style.css */
#logo {
padding-right: 0;
padding-bottom: 0;
padding-top: 20px;
margin-left: 14px; }
#menu {
display: block;
padding-left: 294px;
padding-top: 8px;
width: 635px; }
/* ie.css */
#logo {
padding-top: 13px;
margin-left: 12px; }
#menu {
padding-left: 292px;
padding-top: 11px;
width: 927px; }
-> Vlastnosti, které jsou v souboru ie.css budou zobrazeny pouze v prohlížeči Internet Explorer.
Závěrem
Tolik k optimalizaci pro IE. Je samozřejmě víc způsobů, než jsem zde vypsal, ale zveřejnil jsem jen ty, které jsou podle mě nejznámější a nejpoužívanější. Já osobně používám html>body a občas podmínkový komentář. Jinak komu nezáleží na validitě stránek, asi pro něj bude nejlepší řešení podrtřítkový hack.
Autor: Webmaser
2024 ©