Css - prefixele browsere, sef IT

În acest articol ne vom uita la ceea ce prefixele browser-ul, cauzele lor și cum să le folosească în CSS.

Ce sunt prefixele?

Dezvoltatorii web încep să învețe baza teoretică a CSS și utilizarea acestor cunoștințe în practică, poate rula în probleme atunci când se analizează exemple din lumea reală. Acest lucru poate provoca o neînțelegere a ceea ce se întâmplă și pentru a lupta impotriva dorinta de a explora mai departe această tehnologie.

De exemplu, atunci când se analizează stilul de orice site web pe care le poate întâlni cu proprietățile conțin înainte câteva cuvinte neinteligibile: -webkit-. -moz-. -ms- și colab.

Ce este? De fapt, totul este simplu, aceste cuvinte neinteligibile sunt prefixe de următoarele browsere:

  • -webkit-. browserele Chrome, Safari, Opera;
  • -moz-. browser-ul Mozilla Firefox;
  • -MS-. browser-ul Internet Explorer.

Deci, în cazul în care înainte de numele de proprietate este în valoare de un anumit prefix, atunci înseamnă că proprietatea este vândută și se va aplica numai în acest browser. Toate celelalte browsere vor ignora această proprietate, deoarece pentru ei acest prefix este necunoscut.

Cauzele prefixe?

Motivele pentru apariția prefixe au fost multe:

  • Pentru a activa funcțiile browser-ul CSS experimentale, care standardul nu este încă aprobat. Astfel, producătorii de browser-ul face de încercare și să facă propuneri, înainte de aprobarea proprietăților CSS în standard.
  • Pentru a rezolva problemele cu compatibilitate cross-browser.
  • Pentru a crea propriile proprietăți, care nu sunt incluse în standardul CSS, dar poate să apară în ea după un timp.

Atunci când o funcție experimentală în standardul aprobat și a fost testat într-un browser, acesta este de obicei prefix eliminat.

Cum să utilizați prefixe?

Luați în considerare, de exemplu, următorul cod:

Acest cod folosește proprietățile CSS care se schimba algoritmul de calcul lățimea și înălțimea pentru toate elementele de pagină web. Prima proprietate CSS -webkit-box-dimensionare la o valoare de frontieră-box este pentru browsere care utilizează WebKit motor (Safari) sau intermitent (Chrome, Opera, Yandex Browser). A doua proprietate CSS -moz-box-dimensionare la o valoare de frontieră-box este pentru browsere care utilizează motorul Gecko (Mozilla Firefox). Ultima proprietate CSS este pentru browsere, în care această proprietate a fost deja testate și puse în aplicare în conformitate cu standardul.

Atunci când se utilizează prefixe pentru proprietățile CSS, trebuie să vă amintiți că acestea ar trebui să fie poziționate la proprietățile CSS fără prefixul. De ce este acest lucru atât de important? Acest lucru este important deoarece, dacă o dată într-un browser este (pentru că este cel mai recent), și nu versiunea experimentală a proprietății originale (fără prefix) va fi pus în aplicare, va fi utilizat.

De exemplu: utilizarea proprietăților CSS tuturor elementelor unei pagini web în browserul Google Chrome versiunea 40.

Figura de mai sus arată că originalul proprietate-dimensionare caseta este deja încorporat în browser-ul, și datorită faptului că acesta este acesta din urmă, browser-ul folosește numele său, mai degrabă decât proprietatea de mai sus -webkit-box-dimensionare.

Cum de a verifica sprijinul anumitor proprietăți în browser-ul?

Site-ul în cazul în care puteți verifica dacă proprietatea este vândută sau nu într-un anumit browser poate fi link-ul de mai jos. În plus, numărul de utilizatori de pe site-ul este prezentat ca un procent, care utilizează această versiune a browser-ului.

De exemplu: verificați așa cum este implementat în browserele de proprietate de transformare.

Site-ul browsere „CanIUse“ sunt marcate prin culori diferite, în funcție de starea suportului anumitor proprietăți sau tag-uri:

  • Red Box - browser-ul în care proprietatea nu este vândută;
  • dreptunghi verde cu o cratimă, în colțul din dreapta sus - browser-ul în care proprietatea este utilizat de prefixul;
  • dreptunghi verde deschis - un browser, în care proprietatea este realizată în parte;
  • Green dreptunghi - browser-ul în care proprietatea este pusă în aplicare în conformitate cu standardul.