Prefixe specifice browserului
S-a menționat anterior 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, un producător de browser poate decide să adauge suport pentru funcții pentru a le încerca. Recent, această practică a devenit o parte naturală 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 poate dori să introducă o caracteristică experimentală care nu face parte din niciun standard propus, dar poate primi într-o zi un astfel de statut.
Prefixele browserului sunt adesea introduse pentru acest suport experimental pentru proprietățile CSS, astfel:
--webkit-border-radius
Un cuvânt cheie cu cratimă care precede un nume de proprietate îl marchează ca o lucrare în curs de desfășurare, care se referă exclusiv la implementarea și interpretarea specifică browserului a specificației în evoluție. Dacă o proprietate experimentală este inclusă într-un modul CSS3 complet, browserul trebuie să accepte numele proprietății fără prefix.
Fiecare producător de browser are propriul prefix pe care îl folosește pentru a-și marca propriile caracteristici experimentale în primul rând. Toate celelalte browsere ignoră regulile care conțin prefixe despre 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 prefixele asociate acestora
Cum funcționează prefixele browserului
Iată cum funcționează CSS în practică cu prefixele browserului. Să luăm drept exemplu proprietatea border-radius. 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 raza-chenar: 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.
În momentul scrierii acestui articol (august 2012), toate browserele menționate acceptă proprietatea border-radius fără prefix, inclusiv IE9. ed.
Ordine optimă
Când utilizați prefixele browserului, este important să vă amintiți ordinea în care sunt listate proprietățile. Puteți observa că în exemplul anterior, proprietățile prefixate sunt scrise mai întâi, urmate de proprietatea neprefixată.
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 în mai multe browsere, îmbunătățind treptat designul. Când browserul acceptă în sfârșit proprietatea definită în specificație, proprietatea originală va fi aplicată, nu versiunea experimentală, deoarece va fi ultima din listă. Chiar dacă implementarea versiunii de prefix diferă de proprietatea reală față de specificație, vă pasă că standardul final rămâne primordial.
Nu vă fie frică de prefixele browserului!
Reacția inițială a cititorului ar putea fi ceva de genul „Ah, sunt lucruri confuze și de proprietate!” 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 umflate de cod și lipsa de flexibilitate care vine cu soluțiile non-CSS3. Este, de asemenea, o parte importantă a dezvoltării specificațiilor.
Folosind aceste funcții acum cu prefixele browserului, putem să cercetăm apele și chiar să oferim comentarii valoroase producătorilor de browser înainte ca specificația să fie finalizată. De asemenea, merită să ne amintim că prefixele sunt de obicei adăugate standardelor propuse
(și nu cele aprobate). Aceasta este o mare diferență față de diferitele CSS hacky pe care le folosim cu toții ocazional pentru a rezolva problemele între browsere.
S-ar putea compara prefixele browserului cu exploit-urile de sintaxă pe care mulți dintre noi au fost nevoiți să le utilizeze pentru a comanda versiuni specifice de browser (de exemplu, sintaxa w\idth: 200px sau _width: 200px , care vă permite să faceți referire la o anumită versiune de IE). Dimpotrivă, prefixele browserului sunt o parte importantă a procesului de standardizare, permițându-vă să dezvoltați o caracteristică, implementând-o pentru utilizare practică.
Eric Meyer, expert CSS, explică diferența în articolul Prefix vs. Posthack la
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 în același mod - când am descoperit că sunt incompatibile. A fost o abordare complet reacţionară. Prefixele sunt o abordare orientată spre viitor.
El continuă sugerând că prefixele nu sunt doar o bună practică, ci ar trebui să joace și un rol mai important în procesul de standardizare:
… pentru a forța furnizorii de browsere și grupul de lucru să lucreze împreună pentru a dezvolta testele necesare pentru a testa interoperabilitatea. Aceste teste îi pot ajuta apoi pe cei care urmează restul să obțină interoperabilitate mult mai rapid. Ei pot lansa literalmente implementarea prefixului într-o versiune beta publică și pot omite prefixul în următoarea ediție.
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ă faceți parte dintr-un proces care oferă rezultate acum și deschide calea pentru un viitor în care prefixele pot fi eliminate.
Dar repetări?
S-ar putea să crezi că este destul de prostesc 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 CSS3 vă vor necesita probabil să scrieți cod inflexibil și mai complex, chiar dacă nu este repetitiv.
Nu trebuie să ne repetăm pentru totdeauna. Acesta este acum un pas necesar, dar temporar, pentru a menține implementările browser-la-browser separate de implementarea specificației finale.
Înainte de a începe să facem lucruri frumoase cu câteva proprietăți CSS3 aplicabile și prefixe adecvate de browser, să ne familiarizăm cu tranzițiile CSS. Înțelegerea tranzițiilor și a modului în care funcționează ne va ajuta să le combinăm cu alte proprietăți pentru a crea interacțiuni grozave.
Prefixe specifice browserului
S-a menționat anterior 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, un producător de browser poate decide să adauge suport pentru unele caracteristici pentru a le încerca în practică. Recent, această practică a devenit o parte naturală a procesului, iar feedback-ul din utilizarea experimentală este adesea folosit pentru a modifica specificația.
Pe de altă parte, un producător de browser poate dori să introducă o caracteristică experimentală care nu face parte din niciun standard propus, dar poate primi într-o zi un astfel de statut.
Prefixele browserului sunt adesea introduse pentru acest suport experimental pentru proprietățile CSS, astfel:
--webkit-border-radius
Un cuvânt cheie cu cratimă care precede un nume de proprietate îl marchează ca o lucrare în curs de desfășurare, care se referă exclusiv la implementarea și interpretarea specifică browserului a specificației în evoluție. Dacă o proprietate experimentală este inclusă într-un modul CSS3 complet, browserul trebuie să accepte numele proprietății fără prefix.
Fiecare producător de browser are propriul prefix pe care îl folosește pentru a-și marca propriile caracteristici experimentale în primul rând. Toate celelalte browsere ignoră regulile care conțin prefixe despre care nu le cunosc.
ÎN fila. 1.03 sunt enumerate cele mai utilizate browsere și prefixele asociate acestora. Vom folosi prefixele WebKit, Mozilla și Opera pentru CSS3 în exemplele din capitolele următoare.
Tabelul 1.03. Cele mai utilizate browsere și prefixele asociate acestora
Din cartea Overclockează-ți site-ul autor Matsievski Nikolai8.2. Câteva sfaturi pentru browser Accelerează încărcarea paginilor în Firefox 3 În Firefox, poți accelera încărcarea și afișarea paginilor, îmbunătățind considerabil experiența ta de navigare. Ce trebuie să faceți pentru aceasta: deschideți pagina de setări tastând bara de adresa
Din cartea Internet Intelligence [Ghid de acțiune] autor Iuşciuk Evgheni LeonidoviciCum să căutați pe Internet informații despre anumite persoane Pe internetul rusesc, informații despre oameni pot fi găsite fie folosind motoare de căutare, sau folosind directoare telefonice online. Sisteme de informare se introduce o interogare, care ar trebui să conțină
Din cartea Programare autor Kozlova Irina Sergheevna49. Optimizare pentru modele specifice procesoare Dacă un program va rula pe computere cu modele de procesoare strict definite, puteți încerca să utilizați comenzi care vizează anumite modele de procesoare. Multe dintre comenzile noi oferă
Din cartea Lucrând pe Internet autor Makarsky DmitriUtilizarea browserelor După cum am menționat deja, scopul principal al unui browser este de a vizualiza pagini web, așa că merită să vorbim separat despre caracteristicile navigării pe Internet folosind browsere. Să începem cu controalele de bază, fără de care nu poți
Din cartea Computerra Digital Magazine Nr. 12 autor Revista ComputerraCaracteristici suplimentare browsere Desigur, capacitățile browserelor web nu se termină cu navigarea pe site-uri și mutarea de la o pagină la alta. Programele pentru navigarea pe Internet pot face mult mai mult, despre care vom vorbi acum. Totuși, dacă nu este specificat
Din cartea Computerra PDA 20/03/2010-26/03/2010 autor Revista ComputerraOpera ajunge din urmă cu alte browsere Andrey Pismenny versiunea beta browser Opera 10.50 include un interpret de limbaj JavaScript complet nou. Se numește Carakan și este mult mai rapid decât versiuni mai vechi. Asta înseamnă că Opera a ajuns în sfârșit din urmă cu restul
Din cartea XSLT autor Holzner StephenOpera ajunge din urmă cu alte browsere Autor: Andrey PismennyyPublicat pe 22 martie 2010Versiunea beta a browserului Opera 10.50 este echipată cu un interpret de limbaj JavaScript complet nou. Se numește Carakan și este semnificativ mai rapid decât versiunile anterioare. Înseamnă că
Din cartea The Way of the Programmer: de la 100 USD la 10.000 USD pe lună autor Nikitin AlexandruTransformarea documentelor XML utilizând browsere Suportul XSLT este, de asemenea, inclus în Microsoft Internet Explorer, și în Netscape Navigator. Dintre acești doi browsere de internet Explorer are mult mai mult suport pentru XSLT și voi folosi versiunea 5.5 a acestui browser aici. Despre suportul XSLT în Internet Explorer, puteți
Din cartea Linux: Ghid complet autor Kolisnichenko Denis NikolaeviciPasul 2. Începător avansat. experiență de muncă<= 0,5 года. Знания в рамках школьных и институтских курсов информатики + полученные на работе навыки решения конкретных задач. Этот период охватывает промежуток времени от получения предложения о работе до окончания испытательного срока.
Din cartea CSS3 pentru web designeri de Siderholm Dan6.4.3. Accesibilitatea browserului Acest paragraf vă va spune cum să lucrați cu browsere? Apoi poate fi sărit cu totul sau citit în diagonală. Nu, dragă cititor, nu mă îndoiam că știi să lucrezi cu browsere. Acum noi
Din cartea Computerra Digital Magazine Nr. 225 autor Revista ComputerraCum funcționează prefixele de browser Iată cum funcționează CSS în practică cu prefixele de browser. Să luăm drept exemplu proprietatea border-radius. Să presupunem că vrem să rotunjim colțurile unui element cu o rază de 10 pixeli; iată cum se face: .foo( -- webkit-border-radius: 10px; -- moz-border-radius: 10px; border-radius: 10px;
Din cartea Instalați, configurați și restaurați Windows 7 la 100% autor Vatamanyuk Alexandru IvanoviciDe rezervă pentru toate browserele Browserele care nu acceptă încă mai multe fundaluri vor ignora complet proprietatea de fundal. De aceea am definit proprietatea background-color separat. Figura 5.05 arată cum arată site-ul în IE7: fundalurile multiple sunt ignorate și
Din cartea autoruluiDar alte browsere? Deschizând formularul în Internet Explorer 7, un browser cu zero suport CSS3, vedem un formular de lucru perfect acceptabil (Figura 6.15). Acest lucru este uimitor! Toate îmbunătățirile adăugate de proprietățile CSS3 au fost ignorate; rămâne scheletul formei, lucrând ca
Din cartea autoruluiDar alte browsere? Adăugarea de animații CSS este pentru prima dată în această carte când am îmbunătățit experiența utilizatorului pentru un singur furnizor de browser: WebKit. Unul dintre principalele motive pentru care CSS3 este folosit din ce în ce mai mult este din cauza noilor proprietăți.
Din cartea autorului7 browsere alternative pentru iPad Oleg Nechay Publicat pe 15 mai 2014 Strict vorbind, există un singur browser cu drepturi depline pentru iOS - Safari. Toate alternativele sunt de fapt suplimente grafice și seturi de scripturi Java pentru motorul open source.
Din cartea autorului12.3. Permiterea și blocarea anumitor programe O altă modalitate foarte eficientă de a restricționa accesul la programe este crearea unei liste de programe pe care le puteți rula. Toate programele care nu sunt incluse în această listă, respectiv, sunt interzise să ruleze
De la autor: Prefixul -webkit- este atât de comun în CSS în zilele noastre încât unele site-uri refuză să funcționeze corect fără el. În timp ce pentru dezvoltatori, prefixele CSS ale vânzătorilor din ultimii doi ani au însemnat un semn direct al activității nu atât de ideale a proprietăților, acest lucru 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 acest prefix (chiar și pe dispozitivele mobile).
Ideea nu este nouă, Microsoft Edge acceptă și diverse prefixe -webkit- pentru compatibilitate. Opera a început să accepte prefixele -webkit- în 2012 și apoi a trecut la motorul Blink webkit. W3C și dezvoltatorii de browser nu au planificat să folosească acest prefix în dezvoltarea site-ului web:
„Politica oficială W3C este 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ă acceseze cele mai recente proprietăți 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 uriaș asupra dezvoltării rapide a Internetului.
Modul în care fac Mozilla și Microsoft va dăuna doar majorității site-urilor. Majoritatea site-urilor vor avea deja activate prefixele --moz-, sau Mozilla va afla că, cu o nouă actualizare, va suporta noi funcții fără a fi nevoie să facă modificări. Cu toate acestea, în calitate de dezvoltatori web profesioniști, trebuie să punem capăt acestui lucru și să înțelegem că unele modele pot avea rezultate mixte. S-ar putea să știți deja care dintre proiectele dvs. va strica această actualizare. Dezvoltatori web, este timpul să ne regândim cum abordăm prefixele furnizorilor și cum le testăm pe site-uri web.
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 mapa lista cu proprietățile Edge. Nu toate proprietățile au nevoie de compatibilitate cu motorul Mozilla. Printre prefixele pe care Mozilla le va adăuga, conform paginii wiki Compatibilitate/Mobil/Compatibilitate non-standard sunt următoarele:
Webkit- pentru gradienți
webkit-transformă
webkit-tranziții
webkit-aspect
Webkit-background-clip
raportul-pixeli-dispozitiv-webkit
webkit-animație
Alte proprietăți pot fi în @-webkit-keyframes.
Testul crossbrowser va fi critic
Dacă dvs., dezvoltatorul web, nu ați inclus prefixul -moz- pentru a evita verificarea noilor proprietăți CSS în Firefox, iar termenul limită se apropie și clientul vă obligă să adăugați acest prefix, atunci va trebui să retestați 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 lansarea Firefox 46/47, puteți activa aceste modificări în Firefox Nightly setând layout.css.prefixes.webkit în about:config. Dacă aveți cea mai recentă versiune de Nightly instalată, atunci valoarea implicită ar trebui să fie adevărată. Până acum, Firefox Nightly nu funcționează cu toate modificările de prefix -webkit-, dar este totuși un loc bun 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.
Mai important, Microsoft Edge interpretează și afișează deja prefixele -webkit- într-un mod similar. Și asta înseamnă că orice stil WebKit pentru site-ul tău este deja afișat în browser, de la care nu era deloc așteptat. Dacă nu ați lucrat încă cu acest browser, atunci instalați Windows 10 pentru dvs. și obțineți acces la el pentru a testa site-urile.
Prefixele de furnizor sunt eliminate treptat
Din fericire, prefixele furnizorilor dispar încet pe măsură ce echipele de dezvoltare găsesc soluții noi. Echipa Chrome/Blink și-a schimbat puțin abordarea:
„Privind în viitor, în loc să activăm prefixele de furnizor în mod implicit, vom păstra proprietățile obișnuite în spatele steagului „activare proprietățile platformei web experimentale” în about:flags până când aceste proprietăți sunt activate în mod implicit.”— Echipa Chrome/Blink
Echipa Firefox a urmat o cale similară: „Accentul principal la Mozilla în acest moment este îndepărtarea de prefixele furnizorilor, fie dezactivându-le, fie punându-le într-o stare de proprietăți normale dacă 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ă atunci când folosesc etichete HTML5 personalizate sau proprietăți CSS, dezvoltatorii nu trebuie să adauge un prefix special pentru browserul Edge. În schimb, dezvoltatorii vor scrie cod standard.”— Mashable
Degradarea grațioasă cu prefixe nu mai funcționează
Îndepărtarea prefixelor de furnizor înseamnă un singur lucru - tehnica degradării grațioase prin prefixe nu mai este o opțiune. Alocarea anumitor browsere prin prefixe de furnizor (de exemplu, pentru Chrome) nu a făcut parte din sarcina 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, de asemenea, ați folosit 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 web. Alte browsere caută o modalitate de a extinde compatibilitatea prin adăugarea prefixelor --webkit-. Treptat, odată cu plecarea prefixelor de furnizor, această problemă va dispărea și ea. De asemenea, dezvoltatorii ar trebui să verifice dacă utilizarea prefixelor provoacă efecte nedorite în browserele non-WebKit.
Prefixele de furnizor sunt prefixe speciale care sunt adăugate înaintea numelui unei proprietăți CSS și sunt orientate către 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 dintre ele și să filosofăm puțin despre oportunitatea utilizării lor.
Ce este un vânzător
În primul rând, aș dori să definesc conceptul cuvântului „furnizor”, astfel încât să devină clar pentru noi toți de ce prefixele CSS sunt numite specifice furnizorului, și nu altfel. Furnizor- o companie sau marca care produce produse sau servicii si le furnizeaza sub marca proprie. 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 își folosesc marca comercială sub formă scurtă ca prefix (prefix) la anumite proprietăți CSS pentru identificare. " De ce să folosiți aceste prefixe?", întrebați. Prefixele furnizorului sunt folosite de diferite browsere pentru a încorpora proprietăți CSS în listă și pentru a le sprijini munca cu propriile lor motoare de noi proprietăți experimentale care nu au intrat încă în circulație oficial și nu au fost adăugate la specificația W3C. În alte cuvinte, un fel de proprietate poate îndeplini o funcție complet nouă și adesea foarte utilă, care anterior trebuia implementată folosind hack-uri speciale, trucuri, trucuri sau chiar javascript. Cu toate acestea, această proprietate nu a fost încă adăugată la cele standard și este posibil să nu să fie interpretat de toate browserele, pentru aceasta, înainte ca această proprietate să fie adăugată un prefix cu numele vânzătorului căruia îi aparține și în viitor, atunci când browserul interpretează codul CSS, proprietatea va fi corect înțeleasă și va funcționa funcţia pentru care a fost de fapt destinată.
Lista prefixelor furnizorilor principali
Și acum să dăm o listă a principalelor prefixe ale furnizorilor care există în prezent și ne sunt cunoscute.
- -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-- Browserul alternativ oficial al Apple - Aykab
- -khtml-- rar folosit interpretul KHTML 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) a textului *:
text-size-adjust: niciunul; -moz-text-size-adjust: niciunul; -ms-text-size-adjust: niciunul; -webkit-text-size-adjust: niciunul;
* Proprietate text-ajustare-niciuna are sens să fie folosit pentru dispozitivele mobile, ale căror browsere pot redimensiona automat textul din pagină, făcându-l mai lizibil, dar în același timp dăunând aspectului și esteticii.
În primul rând, descriem proprietatea într-un mod general - ca și cum ar fi deja în specificație și este acceptată de toate browserele, deși nu este încă cazul, dar după ceva timp, cel mai probabil, va deveni relevantă atunci când proprietatea este aprobată. . După aceea, adăugăm aceeași proprietate cu prefixe diferite pentru browserele respective. După cum puteți vedea, nu este absolut nimic complicat în acest sens, totuși, această acțiune „cântărește” foarte mult codul, deoarece, 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 lizibil, pentru că începe să se undă în ochi de la repetarea repetată a aceluiași lucru și există pur și simplu un anumit sentiment de prost gust și o optimizare slabă.
Puțin în afara subiectului, aș dori să spun că există o metodă de programare numită OOP (programare orientată pe obiect). Deci, sarcina sa principală este de a scurta codul folosind clase, funcții etc., în principal această metodă există astfel încât efectuarea unei anumite acțiuni în diferite părți ale programului nu necesită scrierea acelorași bucăți de cod. În cazul OOP, vă puteți referi pur și simplu la o clasă predefinită și la funcțiile acesteia. Acest lucru simplifică munca și reduce și optimizează semnificativ codul. Aproape același lucru se întâmplă cu CSS cu prefixe de furnizor - atunci când acestea nu sunt prezente, codul pare optimizat pentru toate browserele și când vin în salvarea programatorilor nerăbdători care doresc să treacă înaintea motorului lent numit W3C, codul se transformă într-o mizerie de copiate de 5 ori aceleași linii, deosebindu-se unele de altele prin niște prefixe de neînțeles.
Este mai bine, desigur, 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ă adoptată de W3C , atunci desigur că puteți folosi prefixe, nimeni nu vă va bate cu o riglă nu va. Cu toate acestea, în opinia noastră, acesta este un ton prost.
Ce este CSS Hacks sau Vendor Prefixes
Dacă browserul nu acceptă sau nu înțelege un anumit css proprietate, atunci cum începe brusc să înțeleagă această proprietate după aplicarea hack-ului?
Datorită prefixelor de furnizor, furnizorii de browsere implementează deja experimente CSS3 proprietăți pe propriul risc.
Hack-uri CSS sunt - Prefixe de furnizor, sufixele de furnizor și sufixele de furnizor sunt prefixe utilizate de furnizorii de browser pentru proprietăți CSS experimentale nestandardizate încă.
Prefixe de furnizor adaptate unui 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 înțelege „în mod accidental” o proprietate care nu este destinată acesteia.
Rețineți că proprietățile cu prefixe de furnizor nu sunt conforme cu standardele și nu vor trece validarea, cu toate acestea, pot fi utilizate deoarece în mâinile potrivite este un instrument foarte puternic. Și multe studiouri de top Runet folosesc acest lucru.
Utilizarea prefixelor de furnizor (hack-uri) este simplă, proprietatea CSS este scrisă pentru element direct pentru browserele care îl înțeleg. După aceasta, separate prin punct și virgulă, este listată aceeași proprietate, dar cu prefixe de furnizor diferite pentru browsere diferite. Browserul dintr-un astfel de cod interpretează numai proprietatea care este scrisă sub 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 un anumit browser și nu este descrisă în specificație sau în modulul CSS
2. Dacă modulul CSS la care se referă această proprietate este în curs de dezvoltare de către W3C și nu a ajuns încă la statutul de recomandare candidat
3. Dacă o proprietate implementează doar parțial funcționalitatea unei proprietăți descrise într-un modul sau o specificație CSS
Datorită prefixelor de furnizor, furnizorii de browsere implementează deja proprietăți experimentale CSS3 pe propriul risc.
Designerul de layout 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 Opera | Operă | Presto |
| -moz- | Proiectul Mozilla | Firefox, SeaMonkey, Camino etc. | Gecko |
| -Domnișoară- | Microsoft | Internet Explorer 8 | Trident |
| -khtml- | Proiectul KDE | Safari până la versiunea 3, Konqueror etc. | KHTML |
| -webkit- | măr | Safari 3+, Google Chrome etc. | webkit |
| -icab- | măr | iCab | webkit |
Exemplu de scriere:
raza-chenar:15px 0 15px 0; /* Proprietate validă de rotunjire a colțului CSS 3, valoarea (numărul) setează raza de rotunjire */
-moz- raza-chenar:15px 0 15px 0; /* Firefox */
-webkit- raza-chenar:15px 0 15px 0; /* Safari, Chrome */
-khtml- raza-chenar:15px 0 15px 0; /* Konqueror */
