Awọn Akọṣe Awọn Itaja CSS

Kini wọn ati idi ti o yẹ ki o lo wọn

Awọn prefixes titaja CSS, tun ni igba ti a mọ bi tabi awọn prefixes kiri ayelujara CSS , jẹ ọna fun awọn oluṣe ẹrọ lilọ kiri ayelujara lati fi atilẹyin fun awọn ẹya CSS titun šaaju ki awọn ẹya ara ẹrọ ti ni atilẹyin ni kikun ni gbogbo awọn aṣàwákiri. Eyi le ṣee ṣe ni akoko igba idanwo ati akoko igbadun akoko ti oluṣakoso ayelujara ti npinnu bi o ṣe le ṣe awọn ẹya CSS tuntun wọnyi. Awọn prefixes wọnyi di ohun ti o ṣe pataki julọ pẹlu ilọsiwaju CSS3 ni ọdun diẹ sẹhin.

Nigba ti a ṣe akọkọ CCS3, ọpọlọpọ awọn ohun-ini igbadun bẹrẹ si lu awọn aṣàwákiri ọtọtọ ni awọn oriṣiriṣi igba. Fún àpẹrẹ, àwọn aṣàwákiri alápẹẹrẹ aṣàwákiri wẹẹbù (Safari ati Chrome) jẹ àwọn àkọkọ láti ṣàfihàn díẹ lára ​​àwọn ohun-ìmúrayá-ara bíi ti iyipada àti ìyípadà. Nipa lilo awọn ipo iṣowo ti a fi ojulowo titaja, awọn apẹẹrẹ oju-iwe ayelujara le lo awọn ẹya tuntun naa ni iṣẹ wọn ki o jẹ ki wọn ri lori awọn aṣàwákiri ti o ṣe atilẹyin fun wọn lẹsẹkẹsẹ, dipo ti o ni lati duro fun gbogbo oluṣe ẹrọ lilọ kiri ayelujara miiran lati gba!

Nitorina lati ori irisi wẹẹbu iwaju, awọn iṣaaju lilọ kiri ayelujara ni a lo lati fi awọn ẹya CSS tuntun kun si aaye kan nigba ti o ni itunu fun pe awọn aṣàwákiri yoo ṣe atilẹyin awọn iru. Eyi le jẹ pataki paapaa nigbati awọn oluwadi kiri ayelujara ti n ṣe awọn ohun-ini ni awọn ọna oriṣiriṣi oriṣi tabi pẹlu ṣederu ti o yatọ.

Awọn prefixes CSS kiri ayelujara ti o le lo (kọọkan eyiti o jẹ pato si aṣawari ti o yatọ) ni:

Ni ọpọlọpọ awọn igba miiran, lati lo ọja titun CSS ohun-ini, o gba ohun elo CSS ti o yẹ ki o si fi iwe-iṣaaju naa fun aṣàwákiri kọọkan. Awọn ẹya ti a ti ṣeto tẹlẹ yoo wa ni akọkọ (ni eyikeyi aṣẹ ti o fẹ) nigba ti ẹtọ CSS deede yoo wa ni kẹhin. Fun apere, ti o ba fẹ fikun iyipada CSS3 si iwe-ipamọ rẹ, iwọ yoo lo ohun ini gbigbe gẹgẹbi o ti han ni isalẹ:

-kitẹẹli- ogun: gbogbo awọn 4s Ease;
-moz- iyipada: gbogbo 4s Ease;
-ms- ogun: gbogbo 4s Ease;
-oyii : gbogbo awọn 4s Ease;
Ilana: gbogbo awọn 4s Ease;

Akiyesi: Ranti, diẹ ninu awọn aṣàwákiri ni asopọ ti o yatọ fun awọn ini kan ju awọn ẹlomiiran lọ, nitorinaa ṣe ko ro pe irufẹ ohun-iṣakoso kiri-ẹrọ ti ohun-ini jẹ gangan bii ohun-ini toṣe. Fun apẹẹrẹ, lati ṣẹda CSS gradient , o lo ohun-elo-laini-ọlọsẹ. Akata bi Ina, Opera, ati awọn ẹya ode oni ti Chrome ati Safari lo ohun-ini naa pẹlu iwe-iṣaaju ti o yẹ nigba ti awọn ẹya ti Chrome ati Safari ti tete bẹrẹ lo ohun-ini ti a ti ṣaju silẹ-alakikansẹ-afẹsẹgba. Pẹlupẹlu, Akata bi Ina nlo awọn oriṣiriṣi oriṣiriṣi ju awọn ohun ti o ṣe deede.

Idi ti o fi pari ipari rẹ nigbagbogbo pẹlu deede, ti kii ṣe-tẹlẹ ti ikede ti CSS ohun ini jẹ pe pe nigbati aṣàwákiri kan ṣe atilẹyin ofin, yoo lo ọkan naa. Ranti bi a ti ka CSS. Awọn ofin ti o wa ni nigbamii ni iṣaaju lori awọn ohun ti o ti kọja tẹlẹ ti o ba jẹ pe pato jẹ kanna, bẹẹni aṣàwákiri kan yoo ka ẹyà ti o ṣaja ti ofin kan ati lo pe ti ko ba ṣe atilẹyin fun deede, ṣugbọn ni kete ti o ba ṣe, yoo pa awọn onijaja naa pẹlu Ilana ti CSS gangan.

Awọn Akọṣe Ere tita ko ni gige

Nigba ti a ṣe iṣaaju awọn ami-iṣowo titaja, ọpọlọpọ awọn oniṣẹ wẹẹbu ṣe akiyesi boya wọn jẹ gige tabi iyipada kan pada si awọn ọjọ dudu ti lilo koodu koodu kan lati ṣe atilẹyin fun awọn aṣàwákiri ọtọtọ (ranti awọn " Awọn oju-iwe ayelujara ti o dara julọ wo ni IE " awọn ifiranṣẹ). Awọn prefixes onijaja CSS kii ṣe awọn apanija, sibẹsibẹ, ati pe o yẹ ki o ko ni ipamọ nipa lilo wọn ninu iṣẹ rẹ.

A CSS gige nlo awọn abawọn ni imuse ti miiran ano tabi ohun ini ki o le gba ohun-ini miiran lati ṣiṣẹ daradara. Fún àpẹrẹ, ìṣàfilọlẹ ìṣàfilọlẹ àpótí náà ń ṣàtúnṣe àwọn abawọn nínú jíjẹ ohun- èlò ohun-ìdílé tàbí ní bí àwọn aṣàwákiri ṣe parse backlashes (\). Ṣugbọn awọn aṣiṣe wọnyi ni a lo lati ṣatunṣe iṣoro ti iyatọ laarin bi Internet Explorer 5.5 ti ṣe amojuto awoṣe apoti ati bi Netscape ṣe tumọ rẹ, ti ko si ni nkan lati ṣe pẹlu iru ẹbi ara eniyan. A dupe pe awọn aṣàwákiri meji ti o tipẹti jẹ awọn eyi ti a ko ni awọn ifiyesi ara wa pẹlu awọn ọjọ wọnyi.

Iwe iṣaaju ọja tita kii ṣe gige nitori pe o fun laaye alayeye lati ṣeto awọn ofin fun bi a ṣe le ṣe ohun elo kan, lakoko ti o jẹ ni akoko kanna ti o fun awọn onise eroja lati ṣe ohun-ini kan ni ọna miiran laisi fifọ ohun miiran. Pẹlupẹlu, awọn prefixes wọnyi n ṣiṣẹ pẹlu awọn ẹtọ CSS ti yoo jẹ apakan kan pato ti o ṣe alaye . A n fikun diẹ ninu awọn koodu lati le wọle si ohun-ini ni kutukutu. Eyi jẹ idi miiran ti o fi pari ofin CSS pẹlu deede, ohun-ini ti kii ṣe tẹlẹ. Iyẹn ọna o le fi awọn ẹya ti a ti fi silẹ tẹlẹ silẹ lẹhin ti a ba ti ni atilẹyin oju-iwe ayelujara ni kikun.

Fẹ lati mọ ohun ti atilẹyin aṣàwákiri fun ẹya-ara kan jẹ? Oju-iwe ayelujara CanIUse.com jẹ ohun elo ti o niyeye fun pejọ alaye yii ati jẹ ki o mọ iru awọn aṣàwákiri, ati awọn ẹyà wo ti awọn aṣàwákiri náà, n ṣe atilẹyin ẹya-aralọwọ.

Awọn iṣowo ti o tawo ni Itaniloju Ṣugbọn Ọmọ-ibùgbé

Bẹẹni, o lero ibanuje ati atunṣe lati ni lati kọ awọn ini 2-5 lati gba o lati ṣiṣẹ ni awọn aṣàwákiri gbogbo, ṣugbọn o jẹ ipo ti o jẹ ibùgbé. Fun apẹẹrẹ, ni ọdun diẹ sẹhin, lati ṣeto igun kan ni irọka lori apoti ti o ni lati kọ:

-moz-border-radius: 10px 5px;
-iṣẹ-ibiti-aala-oke-osi-radius: 10px;
-iṣẹ-aala-aala-oke-ọtun-radius: 5px;
-iṣẹ-aala-aala-isalẹ-ọtun-radius: 10px;
-iṣẹ-aala-aala-isalẹ-osi-radius: 5px;
radius-aala: 10px 5px;

Ṣugbọn nisisiyi awọn aṣàwákiri ti wá lati ṣe atilẹyin fun ẹya-ara yii ni kikun, iwọ nikan nilo atunṣe ti o ni ibamu:

radius-aala: 10px 5px;

Chrome ti ni atilẹyin ohun elo CSS3 niwon ikede 5.0, Firefox fi kun ni ikede 4.0, Safari fi kun ni 5.0, Opera ni 10.5, iOS ni 4.0, ati Android ni 2.1. Paapa Internet Explorer 9 ṣe atilẹyin fun laisi ipilẹṣẹ (ati IE 8 ati kekere kò ṣe atilẹyin fun u pẹlu tabi laisi awọn asọtẹlẹ).

Ranti pe awọn aṣàwákiri naa maa n wa ni iyipada ati awọn ọna ti o dagbasoke lati ṣe atilẹyin awọn aṣàwákiri agbalagba ti a nilo titi ayafi ti o ba ngbero lori kikọ oju-iwe ayelujara ti o jẹ ọdun lẹhin awọn ọna igbalode julọ. Ni ipari, kikọ awọn prefixes aṣàwákiri jẹ rọrun ju wiwa ati ṣiṣi awọn aṣiṣe ti yoo ṣeeṣe julọ ni ila-ọjọ iwaju, o nilo ki o wa aṣiṣe miiran lati lo ati bẹbẹ lọ.