hacks css și de adaptare la browser-ul, css, tehnologia de internet, articole despre

Tot mai mulți dezvoltatori se deplasează de la aspectul de masă pe aspectul folosind CSS. Dacă există avantaje, cum ar fi timpul de încărcare mai puțin, accesibilitate îmbunătățită și gestionarea mai ușoară site-ul, de ce nu o fac?

Punct de vedere istoric problema cea mai de bază de a folosi CSS a fost că foarte puține browsere le-au sprijinit. Dar, de-a cincea versiune, toate browserele au suport bun pentru CSS, care este utilizat în prezent de 99% din browsere.

De asemenea, este o problemă crucială este faptul că browserele pot interpreta uneori comenzi CSS diferit. de la ceea ce dezvoltatorii ridica mâinile spre cer și să vină înapoi la mese. Dar nu fi prea descurajat, pentru că în măsura în care, după cum veți învăța CSS, veți învăța despre toate diferențele și să vedem că ele nu sunt atât de mult.

Cum să hack lucrările la ajustarea la browser

Principiul de ajustare este de a trimite unul pentru a induce în eroare comenzile browser-ul CSS, și orice altceva - altele care au prioritate față de prima. Acest lucru se datorează principiului că, dacă există două reguli CSS, a doua regulă este obligat să aibă o prioritate mai mare.

Să presupunem că setați intervalul dintre antet și restul conținutului 25 de pixeli în Internet Explorer. În IE, această distanță va arata normal, dar în Opera, Firefox și Safari diferența este prea mare și mult mai bine va arăta, atunci când valoarea sa va fi 10px. Pentru a realiza acest lucru în toate browserele toate aratau la fel, trebuie să creați următoarele două reguli:

#header # 123; margin-bottom: 25px # 125;
#header # 123; margin-bottom: 10px # 125;

Prima comandă este destinat pentru IE, al doilea - pentru toate celelalte browsere. Și cum va funcționa? Ei bine, acum nu este, desigur, pentru că toate browserele pot înțelege atât regulile și, în consecință, se va folosi al doilea, pentru că este ultima.

Prin adăugarea de CSS hack putem ascunde a doua regulă de la IE. Acest lucru înseamnă că IE nu va ști măcar că există o a doua regulă, și, prin urmare, se va folosi prima. Cum de a face acest lucru? Citește mai departe.

Detectarea pentru Internet Explorer

Pentru a forța IE de a utiliza dreptul excludem, putem folosi o comandă selector descendent. care IE nu înțelege. Această comandă include două elemente, dintre care unul este un descendent al celuilalt. În cazul nostru, html> corpul se referă la copil, organismul. conținut în elementul părinte html.

Astfel, echipa noastră convertit în forma următoare:

#header # 123; margin-bottom: 3em # 125;
html> #header corp # 123; margin-bottom: 1em # 125;

IE nu poate înțelege a doua regulă CSS pentru că nu știe ce să facă cu expresia html> corp. asa ca va folosi prima regulă. Toate celelalte browsere vor folosi a doua regulă.

Detectarea pentru IE 5

La prima vedere poate părea destul de ciudat că trebuie să utilizați reguli diferite pentru diferite versiuni de IE, dar pentru IE5 este foarte important. Motivul este că IE5 incorect „înțelege“ model de cutie. Conform standardului în timpul lățimea de instalare a elementului în CSS, padding și granițele nu sunt incluse în această valoare. Cu toate acestea, într-un fel IE5 include în mod inexplicabil, aceste cantități în lățime, determinând astfel o reducere a lățimii elementelor din browser.

Regula stabilește lățimea elementului 10em egal, pentru toate browserele cu excepția IE5, în care lățimea membru va 5em (IE5 cuprinde un tampon de pe ambele părți ale lățimii de calcul + cadru):

#header # 123padding: 2em; frontieră: 0.5em; lățime: 10em # 125;

Soluția la această problemă este de a hack modelul caseta de hack, a inventat Tantek # 199; Elik, care, datorită lui a devenit destul de bine cunoscut în activiștii de mediu CSS. Acum, veți vedea că acesta reprezintă. Deci, pentru a se adapta la regula IE5 și CSS pentru aceasta, ar trebui să utilizați următoarea mențiune:

#header # 123; padding: 2em; frontieră: 0.5em; lățime: 15em; voce-familie: "" # 125; ""; voce-familie: moștenesc; Lățime: 10em # 125;

După cum ghicise anterior imagina că este absolut imposibil. Dar cel mai important lucru este că într-adevăr funcționează, și anume IE5 stabilit inițial lățimea de 15 pixeli, care va include umplutură pe ambele părți și cadrele (stânga și dreapta). Acest lucru va da lățimea necesară a 10em în IE5.

Valoarea în continuare 15em va fi înlocuită cu cea de a doua valoare 10em toate browserele cu excepția IE5. care, pentru un motiv oarecare nu înțelege comanda CSS care vine imediat după hack-expresie. Nu este soluția cea mai elegantă, desigur, dar de lucru.

Detectarea pentru IE pentru MAC

IE pentru MAC, sincer, el face chiar lucruri ciudate cu CSS. Aparent, browser-ul poate începe :) considerat învechit, deoarece Microsoft nu este eliberarea actualizări pentru acesta. Prin urmare, mulți dezvoltatori să scrie cod în așa fel încât site-ul a fost cel puțin în mod normal văzut în IE / Mac, și nu posedă comparabile cu alte funcționalități browsere și design. Utilizatorii care folosesc IE / Mac, vor fi disponibile pentru toate resursele de pe site-ul, și că este de ajuns.

Pentru a ascunde o comandă folosind un hack IE / Mac CSS hack, trebuie doar să intre în fiecare dintre ele, între cratimele și asteriscuri:

/ # 42; Ascundeți din IE-Mac # 42; /
#header # 123; margin-bottom: 3em # 125;
#footer # 123; margin-top: 1.5em # 125;
/ # 42; Sfârșit ascunde # 42; /

IE / Mac va ignora pur și simplu toate aceste comenzi. Acest hack poate fi util în cazul în care o anumită parte nu funcționează corect în IE / Mac. Dacă această partiție nu este un primar, atunci puteți pur și simplu ascunde de IE / Mac, după cum urmează:

#noiemac # 123; display: none # 125;

/ * Ascunde de la IE-Mac * /
#noiemac # 123; display: bloc # 125;
/ * Ascunde End * /

Prima regulă CSS ascunde întreaga secțiune a atribuit ID-ul noiemac (adică