CSS Hacks - Probleme IE
Autor admin • Feb 23rd, 2008 • Categorie: Tutoriale CSS • Comentarii « Nici un comentariu »Daca ati ajuns aici cautand pe google counter strike source hacks nu sunteti in locul potrivit!
Intorcandu-ma putin din Tutoriale Wordpress catre Tutoriale CSS, pentru ca daca dorim sa realizam un blog functionabil trebuie sa construim un CSS bun pentru orice versiune de IE sau browser am sa vad dau cateva informatii legate de CSS hacks.
Nu cred ca exista web designer sau coder care sa nu fi intampinat probleme sau nemultumiri ca urmare a diferentelor in afisarea site-urilor pe diferite browsere (IE, Firefox, Opera etc) si chiar a fiecarui browser cu diferite versiuni (IE 5 sau IE 6 sau IE 7 etc). Eu as zice ca IE da cea mai mare bataie de cap !
CSS Hacks este “denumirea data” pentru codul folosit (introdus) de a pacali bug-urile din browsere, preum ascunderea unor reguli din css pentru un anume browser sau cererea unor browsere sa nu aplice o anumita linie din css. Eu una trebuie sa recunosc ca diferenta intre browsere poate da dureri de cap si nervi 
. Prin urmare e bine de stiut in momentul in care avem probleme unde ne indreptam sa aflam mai multe informatii, ca doar nu vrem sa sculam din somn vecinii si a doua zi sa avem deja fire albe
.
- Prima pagina pe care il recomand cu caldura este tabelul regulilor care se aplica sau nu in diferite browsere.
- Un alt site bun! plin de exemple si explicatii este http://www.brunildo.org/test/
- Bug-urile browserelor: http://css-discuss.incutio.com/?page=BrowserBugs
- Daca aveti si alte site-uri ajutor nu ezitati sa le share-uiti!
Evident ca ideal ar fi sa construim un css care sa fie valid si functionabil pe orice browser, dar daca nu reusim atunci, evident, trebuie sa reparam si sa carpim css-ul astfel incat site-ul nostru sa arate la fel pe toate browsere si fara bug-uri.
Comentariile conditionale sunt folosite pentru a detecta o conditie/regula/cerinta pentru anumitul browser sau anumita versiune de browser din conditia exprimata. In general sunt folosite pentru IE. Exista 2 tipuri de comentarii conditionale: ascunse(ascund HTML-ul de non-IE browsere) sau vizibile. In cazul nostru cele ascunse ne intereseaza. O sintaxa de baza are :
<!–[if condition]>
(HTML to use if condition is true)
<![endif]–>
Pentru diferite vesiuni de IE sintaxa comentariilor conditionale arata:
<!–[if IE 5]>
<p>Acest mesaj apare doar in IE5.</p>
<![endif]–><!–[if !IE 5]>
<p>Acest mesaj apare in orice browser dar nu IE5.</p>
<![endif]–><!–[if lt IE 7]>
<p>Acest mesaj este afisat in orice versiune de IE mai devreme decat IE7 - adica apare afisat in IE5 sau IE6</p>
<![endif]–>
<!–[if gte IE 6]>
<p>Acest mesaj apare in IE6 sau orice versiune mai mare decat IE6(preum IE7).</p>
<![endif]–>
Un exemplu de cum arata un comentariu conditional atunci cand dorim sa introducem un fisier CSS care sa fie aplicabil pentru o anumita vesiune de IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel=”stylesheet” type=”text/css” href=”style.css”/> <!–[if lt IE 7]> <link rel=”stylesheet” type=”text/css” href=”style_ie6.css”/> <![endif]–> </head> <body> <div id=”content”> <p>Model de comentariu conditional. Pentru orice versiune mai mica de IE 7.</p> <p>In style_ie6.css se vor introduce regulile/linile pentru a evita bugurile.</p> </div> </body> </html>
Un alt exemplu:
<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”sstyle7.css” />
<![endif]–>
Acest style sheet se aplica doar utilizatorilor care folosesc IE7.
Un dezavantaj al comentariilor conditionale este ca cer schimbari in codul HTML. Dar se poate folosi si alte tehnici precum:
- Selectori
- IE 6 sau versiune mai mica
* html {}- IE 7 sau versiune mai mica
*:first-child+html {} * html {}- IE 7
*:first-child+html {}- IE 7 si browsere moderene
html>body {}- Doar browsere moderne (dar nu si IE 7)
html>/**/body {}- Opera versions 9 sau versiune mai mica
html:first-child {}
- !important
Internet Explorer 6 si versiuni mai mici au avut probleme cu identificarea !important si prin urmare era ignorata daca exista alta declaratie pentru proprietatile respective. IE 7 a reparat problema .
Un exemplu de folosire a tehnici !important
OK in toate browserele (IE/Win, IE5/Mac, Op6+, Moz, Saf.)
Nu merge in in IE6-/Win daca !important property se suprapune cu alta valoare ptr aceeasi proprietate
selector { property: value1 !important; property: value2; } !important este ignorat - se aplica value2 dar:
selector { property: value1 !important; }
selector { property: value2; }
!important merge (value1 se aplica.)
- @import
Pentru a vedea care browser sau versiune de IE inteleg regula @import si cum trebuie folosita va invit sa vizitati tabelul http://imfo.ru/csstest/css_hacks/import.php .
Articole asemanatoare:
admin is Ana Design. V-a placut tot ce v-am recomandat in tutorial? Atunci nu uitati sa faceti un link catre articol si bookmark it!
Email this author | Toate articolele scrise de admin
