Fiecare browser are propriul stil
În ciuda faptului că browserele moderne se apropie gradual una de cealaltă în ceea ce privește capabilitățile și suportul pentru caietul de sarcini CSS, există încă diferențe de abordare între ele. Fiecare browser interpretează codul HTML și stilurile la discreția sa. Se poate argumenta care dintre browserele „mai corecte“, esența rămâne una - atâta timp cât există mai multe browsere și oameni care sunt aplicate, site-ul trebuie să fie făcut astfel încât în mod corect și fără erori afișate în ele. Cei mai mulți utilizatori sunt pur și simplu indiferenți față de tot felul de standarde și specificații, chiar dacă nu sunt conștienți de existența lor. Mulți nu știu chiar ce HTML este și folosesc browserul care este instalat în sistem în mod implicit. Oamenii vin la site-uri pentru informații și sunt interesați să-l obțină repede și fără probleme. În cazul în care browser-ul dumneavoastră preferat „curba“ afișează site-ul, este mai ușor să nu înțeleagă ce se întâmplă, și să închidă site-ul și du-te la altul, în beneficiul ei sunt acum mult orice subiect.
Astfel, putem concluziona că este necesar să se facă un cod universal, „ascuțit“ pentru diferite browsere, ceea ce înseamnă că necesitatea de a studia caracteristicile lor și de a testa o mulțime de documente. Și aici întâlnim uneori contradicții în activitatea browserelor, care pot fi eludate doar prin scrierea codului CSS pentru fiecare browser. Mai jos sunt considerate metode care iau în considerare specificul browserelor și vă permit să reduceți timpul și efortul petrecut în crearea site-urilor.
document.write ("„)
unde style.css este un fișier pentru un anumit browser.
Netscape4 = document.layer;
Netscape6 = Mozilla = (navigator.appName == "Netscape") DOM;
Netscape7 = navigator.userAgent.indexOf ("Netscape / 7")> = 0;
Opera5 = window.opera DOM;
Opera6 = Opera5 window.print;
Opera7 = Opera5 navigator.userAgent.indexOf ("Opera 7")> = 0;
IE = document.all Opera5;
Firefox = navigator.userAgent.indexOf ("Firefox")> = 0;
dacă (IE) document.write ("„);
alt document.write ("„);
Nu presupuneți că trebuie să scrieți stiluri separate pentru toate browserele. De exemplu, Netscape (versiunile 6 și versiuni mai în vârstă), Mozilla și Firefox se bazează pe un singur nucleu numit Gecko, deci lucrează cu site-uri despre aceleași. Într-o anumită măsură, browserele Internet Explorer 6 și Opera 7 sunt similare în abordarea lor și, în cele mai multe cazuri, ele afișează rezultatul în mod egal. Se pare că, de obicei, este necesar să se creeze numai două stiluri diferite, destinate browserelor care aparțin diferitelor.
Selectori pentru copii
Specificația CSS spune că simbolul pentru comenzile pentru copii este> ("mai mare"). Înregistrare H1> I
Există, de asemenea, selectori de context, care prin designul lor sunt foarte asemănătoare cu selectorii copiilor. În acest caz, două selectori sunt scrise succesiv printr-un spațiu.
DIV> I Selector pentru copii
Selectorul de context DIV I
Diferența dintre aceste tipuri de selectori este următoarea. Stilul selectorului copil este folosit numai dacă este un copil direct, cu alte cuvinte, situat direct în interiorul elementului părinte. Pentru selectorul de context, orice nivel de cuibare este permis. Pentru a clarifica ceea ce este în joc, analizați următorul cod (exemplul 2).
Exemplul 2. Utilizarea incorectă a selectorului pentru copii
Lorem ipsum dolor sta amet.
Exemplul arată adăugarea unei etichete DIV. în interiorul căruia secțiunea P. care la rândul său tag-ul I. În stilul de text scris pentru a schimba culoarea în roșu în selectorul I., dar numai în cazul în care este în mod direct în interiorul DIV. Și în cazul nostru, eticheta I este situată în interiorul P., astfel încât stilul nu va fi aplicat. Pentru a funcționa, trebuie să utilizați una dintre următoarele opțiuni.
P> I
DIV> P
DIV> P> I
Selectorii de context nu iau în considerare ordinea cuiburilor elementelor, astfel că intrarea DIV I din exemplul 2 va acționa corect, adică culoarea textului devine roșie.
Să revenim acum la browsere. Internet Explorer nu înțelege selectorii de copii, dar funcționează corect cu selectorii de context. Prin crearea codului CSS, care conține simultan ambele selectori, facem o diferențiere a stilului pentru browser-ul IE și pentru toate celelalte. Deși selectorii de context sunt înțeleși de toate browserele, linia următoare realocă setările de stil actuale (exemplul 3).
Exemplul 3. Selectori pentru diferite browsere
Lorem ipsum dolor sta amet.
Exemplul arată cum se creează un text verde pentru browserul IE și roșu pentru toate celelalte.
În Internet Explorer 5, se observă o caracteristică interesantă - înțelege selectorul de design HTML>. ce alte browsere, inclusiv versiunile mai vechi, sunt ignorate. Adăugarea textului HTML> DIV în codul de stil
Selector universal
Pentru a denumi orice element din CSS, se utilizează asteriscul (*), numit selectorul universal. Este înțeles de toate browserele, dar aici este combinația de * HTML - un singur Internet Explorer. Astfel, schimbarea stilului pentru diferite browsere este prezentată în exemplul 4.
Exemplul 4. Folosind selectorul universal
Lorem ipsum dolor sta amet.
Exemplul arată modul de creare a unui stil pentru IE și pentru toate celelalte browsere.
În paranteze pătrate, următoarele cuvinte cheie sunt permise:
- IE - orice versiune de Internet Explorer;
- IE 5 - Internet Explorer 5;
- IE 5.5 - Internet Explorer 5.5;
- IE 6 - Internet Explorer 6;
- lt - numărul versiunii browserului este mai mic decât numărul specificat;
- gt - numărul versiunii este mai mult decât specificat;
- lte - numărul versiunii este mai mic sau egal cu cel specificat;
- gte - numărul versiunii browser-ului este mai mare sau egal cu cel specificat.
Deoarece aceste elemente pot fi scrise numai în interiorul containerului BODY. trebuie să adăugați eticheta STYLE. așa cum se arată în Exemplul 5.
Lorem ipsum dolor sta amet.
Utilizând eticheta COMMENT
Exemplul 6. Aplicarea etichetei COMMENT
Internet Explorer va afișa litere albe pe fundal verde, iar restul browserelor - simboluri verzi pe un fundal gri.
Exemple de utilizare a stilului pentru diferite browsere
Luați în considerare sarcinile în care doriți să utilizați un stil diferit pentru browsere, astfel încât datele să fie afișate corect pe pagina web.
Browserele IE (Opera) și Netscape (inclusiv Mozilla și Firefox) se apropie diferit de conceptul lățimii elementului. IE pentru lățime ia valoarea lățimii atributului de stil. și Netscape adaugă la ea valori de câmp și grosimi ale granițelor. Datorită acestei caracteristici, aspectul elementelor poate diferi într-o oarecare măsură în browsere. Exemplul 7 prezintă crearea unui meniu cu o lățime fixă de 200 de pixeli. Vizualizarea meniului cu excepții minore va fi afișată corect de browsere, dar până când lățimea parametrilor: 100% este adăugată selectorului A. Faptul este că folosirea funcției de afișare: bloc a legăturilor le stabilește la lățimea totală a meniului (Figura 1), iar acum nu este necesar să îndreptați cursorul mouse-ului către text. Dar nu în browser-ul Internet Explorer, care în acest caz necesită adăugarea de lățime prin atributul lățime. O valoare de 100% va avea ca rezultat faptul că în Netscape banda excretoare va începe să depășească granița, ceea ce pare a fi mai degrabă neglijent (Figura 2).
Fig. 1. Meniul necesar
Fig. 2. Meniu cu lățime: 100%
Există două modalități prin care meniul să funcționeze în browsere identic și fără erori. Primul este să setați lățimea nu 100%, dar mai puțin, de exemplu, 97%. Deși aceasta nu este cea mai bună opțiune, problema, totuși, rezolvă. Și a doua metodă este de a adăuga atributul lățime numai în browser-ul IE, determinând alte browsere să îl ignore, așa cum se arată în Exemplul 7.
Exemplu 7. Crearea unui meniu
Pentru a rezolva această problemă, nu este suficient să folosiți indentarea și să măriți distanța de la numere la text, orice indentare în acest caz de către browser este complet ignorată. Specificați poziția de listă: în afară și deplasați textul spre dreapta. Vizualizarea listei în acest caz va diferi ușor în diferite browsere, dar, totuși, va fi afișată corect (Exemplul 8).
Exemplul 8. Corecția de eroare pentru Internet Explorer 6
- Lorem ipsum dolor sta amet
- Consectetuer adipiscing elit
- Sedum nonummy euximod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim anunț veniam minim, Quis nostrud ullamcorper tution lobortis exerci suscipit nisl ut aliquip ex ea commodo consequat.
Articole similare
Trimiteți-le prietenilor: