Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Programe
  • Este timpul să reconsiderăm prefixele furnizorului în CSS. CSS3: viață fără prefixe

Este timpul să reconsiderăm prefixele furnizorului în CSS. CSS3: viață fără prefixe

Prefixele furnizorului sunt prefixe speciale care sunt adăugate înaintea numelui Proprietăți CSSși se concentrează pe caracteristicile experimentale ale anumitor browsere. Fiecare browser are propriul prefix de furnizor.

Astăzi am dori să vorbim despre prefixele de furnizor, să le numim pe cele mai comune și să filosofăm puțin asupra oportunității utilizării lor.

Ce este un vânzător

În primul rând, aș dori să definesc conceptul cuvântului „vânzător”, astfel încât să devină clar pentru noi toți de ce prefixele CSS se numesc prefixe de furnizor și nu altceva. Furnizor- o companie sau o marcă care produce produse sau furnizează servicii și le furnizează sub propria marcă. Cuvântul vine din franceză vendere- vinde.

Ce sunt prefixele de furnizor în CSS

În cazul prefixelor CSS, vânzătorii sunt producători de browsere care le folosesc pe ale lor marcăîn formă prescurtată ca prefix (prefix) la anumite proprietăți CSS pentru identificare. " De ce să folosiți aceste prefixe?", întrebați. Sunt folosite prefixe de furnizor browsere diferite pentru implementare în lista CSS proprietăți și sprijin pentru munca lor cu propriile motoare pentru noi proprietăți experimentale care nu au intrat încă oficial în circulație și nu au fost adăugate la specificația W3C. Cu alte cuvinte, unele proprietăți pot efectua un complet nou și adesea foarte functie utila, care anterior trebuia implementat folosind hack-uri, trucuri, trucuri sau chiar javascript-uri speciale. Cu toate acestea, această proprietate nu a fost încă adăugată la cele standard și nu poate fi interpretată de toate browserele în acest scop, înainte de această proprietate și în viitor, când browserul îi aparține, se adaugă un prefix cu numele vânzătorului; interpretează codul CSS, proprietatea va fi înțeleasă corect și va îndeplini funcția pentru care a fost de fapt destinată.

Lista prefixelor furnizorilor principali

Acum să dăm o listă cu prefixele de furnizor principal care există acest momentși cunoscut de noi.

  • -o-- Browser Opera
  • -moz-- browsere din familia Mozilla (producător al celebrului Mozilla Firefox)
  • -Domnișoară-- Microsoft Explorer
  • -webkit-- browsere care utilizează motorul Webkit - Google Chrome, Safari
  • -icab-- oficial browser alternativ Măr - Ikab
  • -khtml-- un interpret KHTML folosit rar pentru KDE

Pentru a utiliza unul sau altul prefix de furnizor, trebuie doar să îl selectați pe cel de care aveți nevoie din listă și să îl adăugați chiar înainte de proprietatea experimentală care nu a fost încă introdusă în specificația generală și să vă bucurați de rezultat.

Iată, de exemplu, codul care dezactivează transformarea automată (redimensionarea) textului *:

Ajustarea dimensiunii textului: niciuna; -moz-text-size-adjust: niciunul; -ms-text-size-adjust: niciunul; -webkit-text-size-adjust: niciunul;

*Proprietate text-ajustare-niciuna are sens să-l folosești pentru dispozitive mobile, ale cărui browsere pot redimensiona automat textul dintr-o pagină, făcându-l mai lizibil, dar în același timp dăunând aspectului și esteticii.

Mai întâi descriem proprietatea în vedere generala- ca și cum ar fi deja în specificație și suportat de toate browserele, deși nu este încă cazul, dar după ceva timp, cel mai probabil, va deveni relevant atunci când proprietatea va fi aprobată. După aceea adăugăm aceeași proprietate cu diverse prefixe pentru browserele respective. După cum puteți vedea, totuși, nu este absolut nimic complicat în acest sens această acțiune face codul mult mai greu, pentru că de fapt am mărit numărul de octeți de cod de 4-5 ori, ceea ce va fi destul de vizibil pentru site-urile cu multe stiluri similare. Și codul în sine devine mai puțin ușor de citit, deoarece de la repetarea repetată a aceluiași lucru începe să se undă în ochi și există pur și simplu un anumit sentiment de prost gust și o optimizare slabă.

Mergând puțin în afara subiectului, aș dori să spun că există o metodă de programare numită OOP (programare orientată pe obiect). Deci aici este sarcina principală- reduceți codul folosind clase, funcții etc. Această metodă există în principal astfel încât efectuarea unei acțiuni specifice în diferite părți ale programului nu necesită scrierea unor bucăți identice de cod. În cazul OOP, puteți pur și simplu contactați în avans o anumită clasăși funcțiile sale. Acest lucru simplifică munca și reduce și optimizează semnificativ codul. Aproape același lucru se întâmplă și în cazul CSS cu prefixe de furnizor - atunci când acestea nu sunt acolo, codul pare optimizat pentru toate browserele și când vin în ajutorul codificatorilor nerăbdători care vor să alerge înaintea locomotivei lente numită W3C, codul se transforma intr-o mizerie formata din aceleasi linii copiate de 5 ori, deosebindu-se unele de altele prin niste prefixe de neinteles.

Desigur, este mai bine să evitați utilizarea prefixelor de furnizor și să nu încercați să depășiți locomotiva unei singure specificații, dar dacă există o dorință irezistibilă și o nevoie urgentă de a folosi una sau alta proprietate CSS care nu a fost încă acceptată de W3C, apoi, desigur, puteți folosi prefixe, nimeni nu vă va lovi la încheietura mâinii pentru asta cu o riglă nu va fi. Cu toate acestea, în opinia noastră, aceasta este o formă proastă.

Prefixe specifice browserului

S-a menționat mai devreme că specificația CSS3 este un set de module care sunt integrate treptat de producătorii de browsere. Uneori, integrarea include suport experimental. Aceasta înseamnă că, în timp ce specificația este scrisă, discutată și criticată la W3C, producătorul browserului poate decide să adauge suport pentru unele caracteristici pentru a le încerca în practică. ÎN În ultima vreme această practică a devenit o parte firească a procesului și Părere, obținut în timpul utilizării experimentale, este adesea folosit pentru a modifica specificația.

Pe de altă parte, un producător de browser ar putea dori să introducă o caracteristică experimentală care nu este inclusă în niciun standard propus, dar poate ajunge într-o zi la un astfel de statut.

Prefixele browserului sunt adesea introduse pentru a oferi un astfel de suport experimental pentru proprietățile CSS, cum ar fi:

– kit-ul web – raza-limită

Cu silabe cuvânt cheie, înainte de numele proprietății, îl marchează ca fiind în curs de desfășurare, referitor numai la implementarea într-un anumit browser și la interpretarea specificației în evoluție. Dacă proprietatea experimentală urmează să fie inclusă într-un modul CSS3 finalizat, browserul trebuie să accepte un nume de proprietate fără prefix.

Fiecare producător de browser are un prefix pe care îl utilizează pentru a-și marca în primul rând proprietățile experimentale. Toate celelalte browsere ignoră regulile care conțin prefixe pe care nu le cunosc.

În tabel 1.03 listează cele mai utilizate browsere și prefixele asociate acestora. Vom folosi prefixele WebKit, Mozilla și Opera pentru CSS3 în exemplele din capitolele următoare.

D. Siderholm. „CSS3 pentru web designeri”

Tabelul 1.03. Cele mai utilizate browsere și prefixe asociate

Cum funcționează prefixele browserului

Iată cum funcționează CSS în practică cu prefixele browserului. Hai sa luam proprietate frontier-radius ca exemplu. Să presupunem că vrem să rotunjim colțurile unui element cu o rază de 10 pixeli; iată cum se face:

– webkit-border-radius: 10px;

– moz-border-radius: 10px; chenar-rază: 10px;

Webkit (motorul utilizat în Browsere Chrome, Safari și Safari pentru mobil

dispozitive) și Gecko (motor browser Firefox) suportă proprietatea border-radius prin proprietățile proprii de prefix; Opera acceptă această proprietate fără prefix. IE9 va suporta, de asemenea, border-radius fără prefixul browserului.

La momentul redactării acestui articol (august 2012), toate browserele menționate acceptă proprietatea border-radius fără prefix, inclusiv IE9. ed.

Ordine optima

Când utilizați prefixele browserului, este important să fiți atenți la ordinea în care sunt listate proprietățile. Puteți observa că în exemplul anterior, proprietățile prefixului sunt scrise mai întâi, urmate de proprietatea fără prefix.

D. Siderholm. „CSS3 pentru web designeri”

De ce să puneți ultima proprietate CSS3 autentică? Este probabil ca în viitor fișierele dvs. de stil să funcționeze Mai mult browsere, îmbunătățind treptat designul. Când un browser acceptă în sfârșit o proprietate care este definită în specificație, se va aplica proprietatea reală, nu versiunea experimentală, deoarece va fi ultima din listă. Chiar dacă implementarea versiunii de prefix diferă de proprietatea reală din specificație, vă asigurați că standardul final rămâne primordial.

Nu vă speriați de prefixele browserului!

Reacția inițială a cititorului ar putea fi ceva de genul „Oh, acestea sunt lucruri confuze și proprietare!” Dar vă asigur că acesta nu este doar un pas înainte, ci și o soluție mult mai puțin confuză în comparație cu bucățile de cod umflate și lipsa de flexibilitate care vin cu soluțiile non-CSS3. Mai mult, asta o parte importantă dezvoltarea specificațiilor.

Folosind aceste proprietăți acum prin prefixele browserului, putem testa apele și chiar oferi feedback valoros furnizorilor de browser înainte ca specificația să fie finalizată. De asemenea, merită să ne amintim că prefixele sunt de obicei adăugate standardelor propuse

(si nu celor aprobate). Aceasta este mare diferență din diferitele hack-uri CSS pe care le-am folosit cu toții uneori pentru a rezolva problemele între browsere.

S-ar putea compara prefixele browserului cu exploatările de sintaxă pe care mulți dintre noi au fost nevoiți să le utilizeze pentru a da o comandă unor versiuni specifice de browsere (de exemplu, sintaxa w\idth: 200px sau_width: 200px, care vă permite să vizați o anumită versiune de IE). ). Dar, dimpotrivă, prefixele browserului sunt o parte importantă a procesului de standardizare, permițând dezvoltarea unei proprietăți, introducându-l pentru utilizare practică.

Eric Meyer, un expert CSS, explică diferența în articolul „Prefix vs. Posthack” de pe

O listă aparte (http://bkaprt.com/css3/2/)3 :

Prefixele ne oferă control asupra destinului hackerilor. În trecut, a trebuit să inventăm o grămadă de erori de analiză doar pentru ca implementările incompatibile să funcționeze la fel - când am descoperit că sunt incompatibile. A fost o abordare complet reacţionară. Prefixele sunt o abordare anticipată.

El continuă sugerând că prefixele nu sunt numai bun antrenament, dar ar trebui să joace și un rol mai important în procesul de standardizare:

...forțați producătorii de browsere și grup de lucru lucrează împreună pentru a dezvolta testele necesare pentru a testa interoperabilitatea. Aceste teste îi pot ajuta apoi pe cei (dezvoltatorii de browser) care îi urmează pe ceilalți să obțină interoperabilitate mult mai rapid. Ei pot lansa literalmente o implementare cu un prefix într-o versiune beta publică și pot elimina prefixul în versiunea următoare.

3 http://www.alistapart.com/articles/prefix-or-posthack/

D. Siderholm. „CSS3 pentru web designeri”

Deci, nu vă faceți griji cu privire la prefixele browserului. Folosiți-le știind că deveniți parte dintr-un proces care obține rezultate acum și deschide calea pentru un viitor în care prefixele pot fi eliminate.

Dar repetări?

S-ar putea crede că este destul de stupid să repeți de trei sau patru ori ceea ce pare aceeași proprietate și pot fi de acord.

Dar realitatea este că soluțiile construite cu CSS3 vă vor necesita probabil să scrieți cod care este inflexibil și mai complex, deși poate nerepetitiv.

Nu va trebui să ne repetăm ​​pentru totdeauna. Acesta este acum un pas necesar, dar temporar, pentru a separa implementările care diferă între browsere de implementarea specificației finale.

Înainte de a începe să facem lucruri interesante cu câteva proprietăți CSS3 aplicabile și prefixele de browser corespunzătoare, să aruncăm o privire la tranzițiile în CSS. Înțelegerea tranzițiilor și a modului în care funcționează ne va ajuta să le combinăm cu alte proprietăți și să creăm interacțiuni grozave.

De la autor: Prefixul -webkit- este atât de comun în CSS astăzi încât unele site-uri refuză să funcționeze corect fără el. În timp ce pentru dezvoltatori, furnizor prefixe css Ultimii doi ani au fost un semn clar de performanță mai puțin decât ideală a proprietăților, ceea ce a determinat Mozilla să facă un pas disperat, dar necesar. În Firefox 46 sau 47 (lansat în aprilie sau mai 2016), Mozilla intenționează să introducă suport pentru o serie de prefixe non-standard –webkit- pentru a îmbunătăți compatibilitatea browser-ului cu acel prefix (chiar și pe dispozitivele mobile).

Ideea nu este nouă Microsoft Edge acceptă, de asemenea, diverse prefixe -webkit- pentru compatibilitate. Opera a început să accepte prefixele -webkit- în 2012, apoi a trecut la motorul Webkit Blink. W3C și dezvoltatorii de browser nu au intenționat să folosească prefix datîn dezvoltarea site-ului web:

„Politica oficială W3C prevede că proprietățile experimentale nu trebuie folosite în codul site-ului. Cu toate acestea, oamenii le folosesc pentru că doresc ca site-urile lor să folosească cea mai recentă tehnologie și să arate cool.”— Pagina W3C despre optimizarea conținutului pentru diferite browsere

Cu toate acestea, dezvoltatorii doresc întotdeauna să aibă acces la cele mai recente funcții cât mai repede posibil. Prefixele vânzătorilor au dat totul peste cap și au dat dominație Webkit, dar cred că prefixele au avut un impact enorm asupra dezvoltării rapide a Internetului.

Mozilla Ways iar Microsoft va dăuna doar majorității site-urilor. Majoritatea site-urilor vor avea deja conectate prefixele –moz- sau se va dovedi că cu cel nou Actualizare Mozilla va suporta proprietăți noi fără a fi nevoie de modificări. Cu toate acestea, în calitate de dezvoltatori web profesioniști, trebuie să lămurim acest lucru și să înțelegem că unele modele pot produce rezultate mixte. Este posibil să știți deja care dintre proiectele dvs. vor fi distruse de această actualizare. Dezvoltatori web, este timpul să vă regândiți abordarea cu privire la prefixele furnizorilor și să le testați pe site-uri.

Prefixe noi

Mozilla va include o serie de prefixe –webkit-. Din ceea ce am adunat, se pare că Mozilla nu are intenția de a-și potrivi lista cu proprietățile Edge. Nu toate proprietățile trebuie să fie compatibile cu motorul Mozilla. Printre prefixele pe care Mozilla le va adăuga, judecând după pagina wiki Compatibilitate/Mobil/Compatibilitate non-standard, se numără următoarele:

Webkit - pentru gradienți

Webkit-transformă

Webkit-tranziții

Webkit-aspect

Webkit-background-clip

Webkit-dispozitiv-raport-pixeli

Webkit-animație

Alte proprietăți pot fi în @-webkit-keyframes.

Testarea între browsere va fi critică

Dacă tu, dezvoltator web, nu ai inclus prefixul -moz- pentru a nu testa noi proprietăți CSS în Firefox, iar termenul limită se apropie, iar clientul te obligă să adaugi acest prefix, atunci va trebui să retestezi site-ul în Firefox 46 sau 47. Aceste versiuni vor fi lansate în aprilie sau mai, așa că mai aveți timp.

Pentru a vă testa site-ul web fără a aștepta Firefox 46/47, puteți activa aceste modificări în Firefox Nightly setând layout.css.prefixes.webkit în about:config. Daca ai instalat ultima versiune Seara, atunci valoarea implicită ar trebui să fie adevărată. Nu toate modificările aduse prefixelor –webkit- funcționează încă în Firefox Nightly, dar funcționează. platforma buna pentru a testa cum va arăta site-ul dvs. în curând. Aș aștepta până în martie înainte de a testa serios site-ul în Firefox Nightly.

Mult mai important, Microsoft Edge interpretează și afișează deja prefixele -webkit- într-un mod similar. Aceasta înseamnă că orice stil WebKit de pe site-ul dvs. este deja afișat într-un browser care a fost complet neașteptat. Dacă nu ați lucrat încă cu acest browser, atunci instalați Windows 10 și obțineți acces la el pentru a testa site-urile.

Prefixele furnizorilor dispar treptat

Din fericire, prefixele furnizorilor dispar treptat pe măsură ce echipele de dezvoltare găsesc soluții noi. Echipa Chrome/Blink și-a schimbat puțin abordarea:

„În continuare, în loc să activăm prefixele de furnizor în mod implicit, vom păstra proprietățile obișnuite în spatele steagului „Activați proprietățile platformei web experimentale” în about:flags până când aceste proprietăți sunt activate implicit.”Echipa The Chrome/Blink

Echipa Firefox a urmat o cale similară: „Directia principală de lucru la Mozilla acum este îndepărtarea prefixelor de furnizor, dezactivându-le sau transferându-le în starea proprietăților obișnuite, dacă acestea sunt deja stabile. Aceasta este cel puțin politica noastră generală, cazurile individuale merită excepții. »— Boris de la Mozilla

Microsoft Edge vizează, de asemenea, eliminarea suportului pentru prefix: „Microsoft încearcă, de asemenea, să scape de prefixele de furnizor din Edge. Aceasta înseamnă că dezvoltatorii, atunci când folosesc etichete HTML5 speciale sau proprietăți CSS, nu vor trebui să adauge un prefix special pentru Browser Edge. În schimb, dezvoltatorii vor scrie cod standard.”— Mashable

Degradarea grațioasă folosind prefixe nu mai funcționează

Îndepărtarea de la prefixele de furnizor înseamnă un singur lucru – tehnica degradării grațioase prin prefixe nu mai este o opțiune. Izolarea anumitor browsere prin prefixe de furnizor (de exemplu, pentru Chrome) nu a fost scopul acestor prefixe; Dezvoltatorii au fost întotdeauna încurajați să folosească toate prefixele (–webkit- la –o-). Dacă utilizați orice funcționalitate care funcționează pe proprietăți cu prefixe de furnizor și ați folosit și tehnica de degradare grațioasă în designul dvs. pentru alte browsere, atunci aceasta nu mai funcționează.

Concluzie

Vremurile se schimbă. Dominația lui WebKit a fost neintenționată și a provocat agitație și incompatibilitate pe Internet. Alte browsere caută să extindă compatibilitatea prin adăugarea de prefixe –webkit-. Treptat, odată cu dispariția prefixelor de vânzător, cel această problemă. Dezvoltatorii ar trebui să verifice dacă utilizarea prefixelor nu provoacă consecințe nedorite în browserele non-WebKit.

Ce s-a întâmplat Hack-uri CSS sau prefixe de furnizor
Dacă browserul nu acceptă sau nu înțelege un anumit CSS proprietate, atunci cum începem dintr-o dată să înțeleagă această proprietate după folosirea hack-ului?
Datorită prefixelor de furnizor, producătorii de browsere introduc deja experimente CSS3 proprietăți pe propriul risc.

Hack-uri CSS sunt - Prefixe de furnizor, sufixele și terminațiile furnizorului sunt prefixe utilizate de producătorii de browsere (furnizori) pentru proprietățile CSS experimentale care nu au fost încă adoptate în standard.

Prefixe de furnizor sunt adaptate pentru un anumit browser și îi permit să înțeleagă proprietățile CSS experimentale și, în același timp, să ignore intrările destinate altor browsere, de ex. niciun browser nu va începe să înțeleagă „în mod accidental” o proprietate care nu este destinată acestuia.

Trebuie amintit că proprietățile cu prefixe de furnizor nu respectă standardele și nu vor trece validarea, cu toate acestea, pot fi utilizate deoarece în mâini capabile este foarte Unealtă puternică. Și multe studiouri RuNet de vârf profită de acest lucru.

Utilizarea prefixelor de furnizor (hack-uri) este simplă; o proprietate CSS este scrisă pentru elementul în formă directă pentru browserele care îl înțeleg. Este urmată de o listă separată prin punct și virgulă a aceleiași proprietăți, dar cu prefixe de furnizor diferite pentru browsere diferite. Browserul dintr-un astfel de cod interpretează numai proprietatea care este scrisă pentru el și le ignoră pe cele scrise pentru alte browsere.

Principalele motive pentru utilizarea prefixelor de furnizor sunt:

1. Dacă această proprietate este concepută numai pentru browser specificși nu este descris în specificație sau în modulul CSS
2. Dacă modulul CSS căruia îi aparține această proprietate este în curs de dezvoltare de către W3C și nu a ajuns încă la statutul de recomandare candidat
3. Dacă proprietatea implementează doar parțial funcționalitatea proprietății descrise în modulul sau specificația CSS

Datorită prefixelor de furnizor, furnizorii de browsere implementează deja funcții experimentale CSS3 pe propriul risc.

Codificatorul poate implementa deja majoritatea caracteristicilor oferite de CSS3, inclusiv diverse tranziții și animații fără a utiliza scripturi, dar folosind prefixe de furnizor.

Prefixele furnizorului celor mai comune browsere:

Prefixul furnizorului Producător Browser Motor de browser
-o-, -op-, -xv-Software OperaOperăPresto
-moz-Proiectul MozillaFirefox, SeaMonkey, Camino etc.Gecko
-Domnișoară-MicrosoftInternet Explorer 8 Trident
-khtml-Proiectul KDESafari până la versiunea 3, Konqueror etc.KHTML
-webkit-MărSafari 3+, Google Chrome si etc.WebKit
-icab-MăriCabWebKit

Exemplu de scriere:

raza-chenar:15px 0 15px 0; /* Proprietate validă de rotunjire a colțului CSS 3, valoarea (numărul) specifică raza rotunjirii */
-moz- raza-chenar:15px 0 15px 0; /* Firefox */
-webkit- chenar-rază:15px 0 15px 0; /* Safari, Chrome */
-khtml- raza-chenar:15px 0 15px 0; /* Konqueror */

La prima vedere, se pare că prefixele de furnizor sunt ceva de genul gramaticii... Prefixele de furnizor, sufixele de vânzător și terminațiile de vânzător... Dar ce legătură are asta cu aspectul?

Se dovedește că este cel mai direct! Prefixele furnizorului sunt prefixe pentru titlu CSS proprietăți pe care furnizorii de browser le adaugă pentru proprietăți nestandardizate.

Conform specificației CSS 2.1, identificatorii CSS care încep cu „-” sau „_” sunt rezervați pentru extensiile de browser CSS. Având aceste caractere la începutul proprietății, se asigură că viitoarele extensii de browser nu vor interfera niciodată cu proprietățile CSS standard. Acestea. niciun browser nu va începe să înțeleagă „în mod accidental” o proprietate care nu este destinată acestuia.

Ce sunt ei?

Prefixele furnizorului celor mai comune browsere sunt prezentate în tabelul de mai jos:

Cum functioneaza?

O proprietate CSS este scrisă pentru element în formă directă pentru browserele care îl înțeleg. După aceasta, separate prin punct și virgulă, este aceeași proprietate, dar cu prefixe de furnizor diferite pentru browsere diferite. Un browser dintr-un astfel de cod interpretează numai acele proprietăți care sunt scrise pentru el și le ignoră pe cele scrise pentru alte browsere.

De exemplu, proprietatea CSS responsabilă pentru transparența elementului este utilizată între browsere astfel:

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/ -moz-opacity:0.5;/* Mozilla 1.6 */ -khtml- opacitate:0.5;/* Konqueror 3.1, Safari 1.1 */ opacitate:0.5/* Safari 2.0+, Chrome, Firefox Opera, */

Pentru ce este?

În blogul lor, dezvoltatorii Internet Explorer menționează trei motive pentru utilizarea prefixului -ms- vendor pentru IE8:

  1. Dacă această proprietate este concepută numai pentru Microsoft IE și nu este descrisă în specificație sau în modulul CSS
  2. Dacă modulul CSS căruia îi aparține această proprietate este în curs de dezvoltare W3Cși nu a atins încă statutul de recomandare de candidat
  3. Dacă o proprietate implementează doar parțial funcționalitatea unei proprietăți descrise într-un modul sau specificație CSS

Alți dezvoltatori folosesc prefixe de furnizor din motive similare. De exemplu, Mozilla are listă uriașă proprietățile CSS individuale și valorile acestora cu prefixe de furnizor -moz-, care sunt concepute special pentru Firefox și nu sunt descrise nici în modulul CSS, nici în specificație.

In afara de asta, Dezvoltatorii Microsoft a reușit să ascundă structurile invalide de validator folosind prefixe de furnizor. Acest lucru se aplică în primul rând filtrelor. Pentru IE 5.5-7 filtrul arăta astfel:

Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE 5.5-7*/

În principiu, un astfel de design nu poate trece de validare! Dar este ușor de trecut de un nou design al aceluiași filtru, dar pentru IE 8:

Ms-filter: „progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;/* IE 8*/

Desigur, nu doriți să scrieți mai multe linii de cod cu proprietăți de furnizor pentru fiecare browser, în loc de o linie de cod cu proprietăți standard. Dar nu trebuie să uităm că specificația CSS3 este încă în curs de dezvoltare. Este posibil ca ceva să se schimbe în descrierea proprietății în timpul standardizării sau să nu fie deloc în specificație. Atunci cu siguranță le va fi mai ușor pentru dezvoltatori să abandoneze proprietatea vânzătorului și să mențină standardele. De acord dacă versiuni diferite browser, aceeași proprietate va funcționa diferit, nu va ieși nimic bun din ea. Ar fi mai bine dacă proprietățile furnizorului ar funcționa în versiuni mai vechi de browsere, iar versiunile noi ar suporta specificația direct, iar proprietățile cu prefixe de furnizor ar fi ignorate.

Bun bonus

Datorită prefixelor de furnizor, furnizorii de browsere implementează deja funcții experimentale CSS3 pe propriul risc.

Codificatorul poate implementa deja majoritatea caracteristicilor oferite de CSS3, inclusiv diverse tranziții și animații fără a utiliza scripturi, dar folosind prefixe de furnizor.

Un bun exemplu de astfel de implementare ar fi utilizarea proprietății CSS3. Să stabilim sarcina de a implementa o schimbare lină a culorii de fundal pentru un link atunci când trecem cursorul, fără a utiliza JavaScript. Pentru a face acest lucru, trebuie să adăugați următorul cod la CSS pentru link:

Webkit-transition:background-color 5s ease-in 3s;/* funcționează în Safari 3.1+, Chrome 1+ */ -o-transition:background-color 5s ease-in 3s;/* funcționează în Opera 10.5+ */ - moz-transition:background-color 5s ease-in 3s;/* planificat pentru Firefox 4.0+ */ transition:background-color 5s ease-in 3s;/* nu este acceptat direct de niciun browser */

Puteți vedea un exemplu viu.

Cele mai bune articole pe această temă