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ă la discreția sa codul și stilurile STMML în special. În acest caz, puteți argumenta pentru o lungă perioadă de timp ce browser-ul este "mai corect", esența rămâne aceeași - în timp ce există mai multe browsere și oamenii le folosesc, site-ul ar trebui să fie făcut astfel încât să fie corect și fără Erori în ele afișate. 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 este STMML ș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, ajungem la concluzia că codul trebuie să devină universal, "ascuțit" pentru diferite browsere, ceea ce înseamnă că trebuie să-i studiați trăsăturile și să testați multe fișiere. Și aici întâlnim uneori contradicții în activitatea browserelor, care pot fi eludate doar prin scrierea de etichete CSS (CSS) pentru fiecare browser. Mai jos sunt considerate modalități 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 (MSS) este un fișier pentru un anumit browser.


DOM = document.getElementById;
Noscape4 = document.layer;
Noscape6 = Mozilla = (navigator.appName == "NoScape") DOM;
Noscape7 = navigator.userAgent.indexOf ("NoScape / 7")> = 0;
Opera5 = window.Opera DOM;
Opera6 = Opera5 window.print;
Opera7 = Opera5 navigator.userAgent.indexOf ("Opera 7")> = 0;
Opera8 = navigator.userAgent.indexOf ("Opera / 8")> = 0;
Opera9 = navigator.userAgent.indexOf ("Opera / 9")> = 0;
IE = document.all ! Opera5;
Foc Foo = navigator.userAgent.indexOf (Fire Foc)> = 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 Fire Fire se bazează pe un singur nucleu numit Gecko, astfel încât acestea să funcționeze cu site-urile noastre aproximativ la fel. Într-o oarecare măsură, 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ă aveți de obicei nevoie să creați numai două stiluri diferite, concepute pentru browserele aparținând diferitelor "tabere".

Selectori pentru copii

Specificația CSS (CSS) spune că simbolul pentru comenzile pentru copii este> ("mai mare"). Înregistrare H1> I spune browserului să stabilească culoarea verde pentru conținutul etichetei Numai dacă titlul

este pentru el un părinte direct.

Există și selectori concurenți, care, prin designul lor, sunt foarte asemănători selectorilor copiilor. În acest caz, două selectori sunt scrise succesiv printr-un spațiu.

DIV> I / * Selector pentru copii * /
DIV I / * SELECTOR CONCONTINENT * /

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 un selector concatențial, 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

. în interiorul căruia este plasat paragraful

. și, la rândul său, eticheta . În stil este înregistrat pentru a schimba culoarea conținutului în roșu la selector . dar numai dacă este direct înăuntru

. Și în cazul nostru, eticheta este situat în interior

. astfel încât stilul nu se va aplica. Pentru a funcționa, trebuie să utilizați unul dintre următoarele seturi.

P> I
DIV> P
DIV> P> I

Selectorii bazați pe context nu iau în considerare ordinea de așezare a elementelor, astfel că intrarea DIV I din exemplul 2 va acționa corect, adică culoarea conținutului va deveni roșie.

Să revenim acum la browsere. Internet Explorer (IE) nu înțelege selectorii de copii, dar funcționează corect cu cele concurente. Crearea codului CSS (CSS), care conține simultan ambele selectori, făcând astfel diferențierea stilului pentru browser-ul IE și toate celelalte. Deși selectorii concultenți 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.


Acest exemplu arată crearea de conținut verde pentru browserul IE și roșu pentru toate celelalte.

În Internet Explorer 5 Explorer, se observă o caracteristică interesantă - înțelegem designul selectorului STML>. ce alte browsere, inclusiv versiunile mai vechi, sunt ignorate. Adăugarea în conținutul stilului de cod STML> DIV obțineți conținutul care se află în interiorul etichetei

. culoarea roșie. Dar numai în IE 5.

Selector universal

Pentru a denumi orice element din CSS (CSS), se utilizează un asterisc (*), ceea ce înseamnă un selector universal. Este înțeles de toate browserele, dar aici este combinația de * SHTML - 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.


Acest exemplu 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 a browserului Internet Explorer;
IE 5 - Internet Explorer 5;
IE 5.5 - Internet Explorer 5.5;
IE 6 - Internet Explorer 6;
IE 7 - Internet Explorer 7;
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 . atunci ar trebui să adăugăm o etichetă


  1. Lorem ipsum dolor sta amet

  2. Consectetuer adipiscing elit

  3. Sedum nonummy euximod

  4. 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.

Notă. Variabila nedefinită: o în /home/www-html/data/www/html.ru/-id=67.htm pe linia 451

CSS (CSS) pe această temă

fundal
Parametrul vă permite să setați simultan până la cinci atribute ale stilului de fundal. Valorile pot merge în orice ordine, browserul însuși va determina care corespunde atributului dorit.

afișa
Un atribut multifuncțional care definește modul în care un element trebuie afișat într-un fișier.

umplutură
Setează valoarea câmpurilor în jurul conținutului elementului. Câmpul se referă la distanța de la marginea interioară a cadrului elementului la dreptunghiul imaginar care delimitează conținutul acestuia.

lățime
Setează lățimea blocului sau elemente înlocuite. Lățimea nu include grosimea marginilor din jurul elementului, valoarea indivizilor și margini.

Articole similare

Pagina anterioară

Pagina următoare