Cilat janë ato dhe pse duhet t'i përdorni ato
Paragrafët e shitësit CSS, gjithashtu të njohura dikur si prefikset e shfletuesit CSS , janë një mënyrë për krijuesit e shfletuesve që të shtojnë mbështetjen për karakteristikat e reja të CSS përpara se këto funksione të mbështeten plotësisht në të gjithë shfletuesit. Kjo mund të bëhet gjatë një lloj testimi dhe periudhe eksperimentimi ku prodhuesi i shfletuesit po përcakton saktësisht se si do të zbatohen këto karakteristika të reja CSS. Këto prefiksa u bënë shumë të njohura me rritjen e CSS3 disa vjet më parë.
Kur u prezantua fillimisht CCS3, një numër i pronave të ngazëllyer filluan të goditnin shfletues të ndryshëm në kohë të ndryshme. Për shembull, shfletuesit me anë të uebit (Safari dhe Chrome) ishin të parat për të prezantuar disa nga vetitë e stilit të animacionit, si transformimi dhe tranzicioni. Duke përdorur vetitë prefiksi të shitësit, dizajnerët e uebit ishin në gjendje të përdorin ato funksione të reja në punën e tyre dhe i kanë parë në shfletues që i mbështesin menjëherë, në vend që të presin që çdo prodhues tjetër i shfletuesit të arrijë!
Pra, nga perspektiva e një zhvilluesi të uebit në fund të faqes, prefikset e shfletuesit përdoren për të shtuar funksione të reja CSS në një vend, duke pasur ngushëllim duke e ditur se shfletuesit do të mbështesin ato stile. Kjo mund të jetë veçanërisht e dobishme kur prodhuesit e shfletuesve të ndryshëm implementojnë prona në mënyra paksa të ndryshme ose me një sintaksë të ndryshme.
Prefikset e shfletuesit CSS që mund t'i përdorni (secila prej të cilave është specifike për një shfletues tjetër) janë:
- Android: -webkit-
- Chrome: -webkit-
- Firefox-i: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Në shumicën e rasteve, për të përdorur një pronë të re stili CSS, ju merrni pronën standarde CSS dhe shtoni prefiksin për secilin shfletues. Versionet prefixed gjithmonë do të vijnë së pari (në cilëndo mënyrë që preferoni), ndërsa prona normale CSS do të vijë e fundit. Për shembull, nëse doni të shtoni një kalim CSS3 në dokumentin tuaj, ju do të përdorni pronën e tranzicionit siç tregohet më poshtë:
-webkit- tranzicioni: të gjitha lehtësitë 4;
-moz- tranzicion: të gjitha 4s lehtësuar;
-ms- tranzicion: të gjitha 4s lehtësuar;
-o- tranzicion: të gjitha lehtësitë 4;
tranzicion: të gjitha lehtësitë 4;
Shënim: Disa shfletues kanë një sintaksë të ndryshme për prona të caktuara se sa të tjerët, prandaj mos supozoni që versioni i precizuar i shfletuesit të një prone është saktësisht e njëjtë me pronën standarde. Për shembull, për të krijuar një gradient CSS , përdorni strukturën lineare gradient. Firefox, Opera dhe versionet bashkëkohore të Chrome dhe Safari e përdorin atë pronë me prefiksin e duhur, ndërsa versionet e hershme të Chrome dhe Safari përdorin pronën prefiksi -webkit-gradient. Gjithashtu, Firefox përdorë vlera të ndryshme nga ato standarde.
Arsyeja që gjithmonë i jep fund deklaratës suaj me versionin normal, jo të paracaktuar të pronës CSS, është që, kur një shfletues të mbështesë rregullin, ai do ta përdorë atë. Mos harroni se si lexohet CSS. Rregullat e mëvonshme kanë përparësi mbi ato më të hershme nëse specifika është e njëjtë, kështu që një shfletues do të lexonte versionin e shitësit të një rregulli dhe do ta përdorte atë nëse nuk e mbështet atë normale, por sapo të ketë, ai do të anashkalojë versionin e shitësit me rregulli aktual CSS.
Prefikset e shitësit nuk janë një hack
Kur u paraqitën parat e shitësit, shumë profesionistë të web-it pyetnin nëse ata ishin një hack apo një kthim prapa në ditët e errëta të pirjes së kodit të një faqeje interneti për të mbështetur shfletues të ndryshëm (mos harroni ato " Kjo faqe shikohet më së miri në mesazhet e IE "). Prefikset e shitësve të CSS nuk janë hacks, dhe ju nuk duhet të keni rezerva për përdorimin e tyre në punën tuaj.
Një haker i CSS shfrytëzon gabime në zbatimin e një elementi ose të një prone tjetër në mënyrë që të marrë një pronë tjetër për të punuar në mënyrë korrekte. Për shembull, modeli i kutisë së hakerave ka shfrytëzuar gabime në analizimin e pronës së familjes zanore ose në mënyrën se si shfletuesit shqyrtojnë kundërsulmet (\). Por këto hack janë përdorur për të rregulluar problemin e dallimit në mes të mënyrës se si Internet Explorer 5.5 e trajtoi modelin e kutisë dhe si e interpretoi Netscape dhe nuk kishte të bënte fare me stilin e familjes zanore. Fatmirësisht, këto dy shfletues të vjetër janë ato që nuk kemi shqetësime me këto ditë.
Prefiksi i shitësit nuk është një hack sepse lejon specifikimin të vendosë rregulla për mënyrën se si mund të implementohet një pronë, ndërsa në të njëjtën kohë i lejon krijuesit e shfletuesve të zbatojnë një pronë në një mënyrë tjetër, pa thyer çdo gjë tjetër. Për më tepër, këto prefiksa po punojnë me pronat CSS që përfundimisht do të jenë pjesë e specifikimit . Ne thjesht po shtojmë një kod për të pasur akses në pronën e hershme. Kjo është një tjetër arsye pse i jep fund rregullit CSS me pronën normale, jo të paracaktuar. Në këtë mënyrë ju mund të bini versionet prefixed sapo të arrihet përkrahja e plotë e shfletuesit.
Dëshironi të dini se çfarë është mbështetësi i shfletuesit për një veçori të caktuar? Faqja e internetit CanIUse.com është një burim i mrekullueshëm për grumbullimin e këtij informacioni dhe t'ju tregojë se cilat shfletues dhe cilat versione të atyre shfletuesve aktualisht mbështesin një veçori.
Prefiksi i shitësit janë të bezdisshëm, por të përkohshëm
Po, mund të ndihet e bezdisshme dhe e përsëritshme që duhet të shkruaj pronat 2-5 herë për ta bërë atë të funksionojë në të gjithë shfletuesit, por është një situatë e përkohshme. Për shembull, vetëm disa vjet më parë, për të vendosur një cep të rrumbullakosur në një kuti që duhej të shkruanit:
-moz-kufiri-kufiri: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
rrezja kufitare: 10px 5px;
Por tani që shfletuesit kanë ardhur për të mbështetur plotësisht këtë veçori, ju duhet vetëm versionin e standardizuar:
rrezja kufitare: 10px 5px;
Chrome ka mbështetur pronën CSS3 që nga versioni 5.0, Firefox e ka shtuar atë në versionin 4.0, Safari e ka shtuar atë në 5.0, Opera në 10.5, iOS në 4.0 dhe Android në 2.1. Edhe Internet Explorer 9 e mbështet atë pa një prefiks (dhe IE 8 dhe më poshtë nuk e mbështesin atë me ose pa prefikset).
Mos harroni se shfletuesit do të ndryshojnë gjithmonë dhe qasjet krijuese për të mbështetur shfletuesit më të vjetër do të kërkohen nëse nuk planifikoni të ndërtoni faqet e internetit që janë vite pas metodave më moderne. Në fund, shkrimi i prefiksit të shfletuesit është shumë më i lehtë sesa gjetja dhe shfrytëzimi i gabimeve që me siguri do të fiksohen në një version të ardhshëm, duke kërkuar që të gjesh një gabim tjetër për të shfrytëzuar dhe kështu me radhë.