Beth ydyn nhw a pham y dylech eu defnyddio
Mae rhagddodion gwerthiant CSS, a elwir yn rhagflaenydd porwr CSS neu rai, yn ffordd i wneuthurwyr porwyr ychwanegu cefnogaeth ar gyfer nodweddion CSS newydd cyn i'r nodweddion hynny gael eu cefnogi'n llawn ym mhob porwr. Gellir gwneud hyn yn ystod math o gyfnod profi ac arbrofi lle mae gwneuthurwr y porwr yn penderfynu yn union sut y bydd y nodweddion CSS newydd hyn yn cael eu gweithredu. Daeth y rhagddodiad hyn yn boblogaidd iawn gyda chynnydd CSS3 ychydig flynyddoedd yn ôl.
Pan gyflwynwyd CCS3 gyntaf, dechreuodd nifer o eiddo cyffrous i daro gwahanol borwyr ar wahanol adegau. Er enghraifft, y porwyr sydd â phrosiect gwefannau (Safari a Chrome) oedd y rhai cyntaf i gyflwyno rhai o'r eiddo animeiddiad fel trawsnewid a thrawsnewid. Trwy ddefnyddio priodweddau gwerthfawrogi gwerthwyr, roedd cynllunwyr gwe yn gallu defnyddio'r nodweddion newydd hynny yn eu gwaith a'u gweld ar y porwyr a oedd yn eu cefnogi ar unwaith, yn hytrach na gorfod aros i bob gwneuthurwr porwr arall ddal i fyny!
Felly o bersbectif datblygwr gwe blaen, defnyddir rhagddodynnau porwr i ychwanegu nodweddion CSS newydd i safle tra'n cael cysur gan wybod y bydd y porwyr yn cefnogi'r arddulliau hynny. Gall hyn fod yn arbennig o ddefnyddiol pan fydd gwahanol wneuthurwyr porwyr yn gweithredu eiddo mewn ffyrdd ychydig yn wahanol neu gyda chystrawen wahanol.
Dyma'r rhagddodiad porwr CSS y gallwch ei ddefnyddio (pob un sy'n benodol i borwr gwahanol) yw:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Yn y rhan fwyaf o achosion, i ddefnyddio eiddo arddull CSS newydd sbon, byddwch yn cymryd yr eiddo CSS safonol ac yn ychwanegu'r rhagddodiad ar gyfer pob porwr. Byddai'r fersiynau a ragnodwyd bob amser yn dod gyntaf (mewn unrhyw orchymyn sy'n well gennych) tra bydd yr eiddo CSS arferol yn dod yn olaf. Er enghraifft, os ydych chi eisiau ychwanegu pontio CSS3 i'ch dogfen, byddech chi'n defnyddio'r eiddo trosglwyddo fel y dangosir isod:
-webkit- transition: all 4s rhwyddineb;
-moz- transition: all 4s rhwyddineb;
-ms- transition: all 4s rhwyddineb;
-o- pontio: pob un yn haws;
pontio: pob un yn haws;
Nodyn: Cofiwch fod gan rai porwyr gystrawen wahanol ar gyfer rhai eiddo nag eraill, felly peidiwch â chymryd yn ganiataol fod fersiwn prefixed porwr eiddo yn union yr un fath â'r eiddo safonol. Er enghraifft, i greu graddiant CSS , rydych chi'n defnyddio'r eiddo graddol llinellol. Mae Firefox, Opera, a fersiynau modern o Chrome a Safari yn defnyddio'r eiddo gyda'r rhagddodiad priodol tra bod fersiynau cynnar o Chrome a Safari yn defnyddio'r eiddo prefixed -webkit-gradient. Hefyd, mae Firefox yn defnyddio gwahanol werthoedd na'r rhai safonol.
Y rheswm eich bod chi bob amser yn gorffen eich datganiad gyda'r fersiwn arferol, heb ei ragnodi o eiddo CSS fel bod pan fydd porwr yn cefnogi'r rheol, bydd yn defnyddio'r un hwnnw. Cofiwch sut mae CSS yn cael ei ddarllen. Mae'r rheolau diweddarach yn cymryd blaenoriaeth dros rai cynharach os yw'r unioniaeth yn yr un fath, felly byddai porwr yn darllen fersiwn gwerthwr rheol ac yn defnyddio hynny os nad yw'n cefnogi'r un arferol, ond unwaith y bydd yn gwneud hynny, bydd yn goresgyn y fersiwn gwerthwr gyda y rheol CSS wirioneddol.
Nid yw Rhagolygon Gwerthwr yn Hacio
Pan gyflwynwyd rhagolygon gwerthwyr yn gyntaf, roedd llawer o weithwyr proffesiynol y we yn meddwl a oeddent yn gludo neu'n symud yn ôl i ddyddiau tywyll codio cod gwefan i gefnogi gwahanol borwyr (cofiwch y negeseuon " Mae'r wefan hon orau yn cael ei weld yn IE "). Nid yw rhagddodion gwerthwyr CSS yn cael eu hacks, fodd bynnag, ac ni ddylech chi gael unrhyw amheuon ynglŷn â'u defnyddio yn eich gwaith.
Mae hack CSS yn manteisio ar ddiffygion wrth weithredu elfen neu eiddo arall er mwyn cael eiddo arall i weithio'n gywir. Er enghraifft, mae'r model bocs yn defnyddio diffygion a gafodd eu hecsbloetio wrth rannu eiddo'r teulu llais neu sut mae parse porwyr yn rhwystro (\). Ond defnyddiwyd yr haciau hyn i ddatrys problem y gwahaniaeth rhwng sut y rhoddodd Internet Explorer 5.5 ymdrin â'r model blwch a sut roedd Netscape yn ei ddehongli, ac nid oes ganddo unrhyw beth i'w wneud â steil y teulu llais. Diolch yn fawr mae'r ddau borwyr hynafol hyn yn rhai nad ydym yn pryderu ein hunain gyda'r dyddiau hyn.
Nid yw rhagddodiad gwerthwr yn fai gan ei bod yn caniatáu i'r fanyleb sefydlu rheolau ar gyfer sut y gellid gweithredu eiddo, ac ar yr un pryd caniatáu i wneuthurwyr porwyr weithredu eiddo mewn modd gwahanol heb dorri popeth arall. At hynny, mae'r rhagddodiadion hyn yn gweithio gydag eiddo CSS a fydd yn y pen draw yn rhan o'r fanyleb . Rydym yn syml yn ychwanegu rhywfaint o god er mwyn cael mynediad i'r eiddo yn gynnar. Dyma reswm arall pam rydych chi'n gorffen rheol CSS gyda'r eiddo arferol, heb ei ragnodi. Fel hyn, gallwch chi ollwng y fersiynau a ragnodwyd unwaith y bydd cefnogaeth porwr llawn yn cael ei gyflawni.
Eisiau gwybod beth yw cefnogaeth y porwr ar gyfer nodwedd benodol? Mae'r wefan CanIUse.com yn adnodd gwych ar gyfer casglu'r wybodaeth hon a rhoi gwybod i chi pa borwyr, a pha fersiynau o'r porwyr hynny sydd ar hyn o bryd yn cefnogi nodwedd.
Rhagolygon Gwerthwr yn Aflonyddu Ond Dros Dro
Ydw, efallai y bydd yn teimlo'n blino ac yn ailadroddus i orfod ysgrifennu'r eiddo 2-5 gwaith i'w wneud ym mhob porwr, ond mae'n sefyllfa dros dro. Er enghraifft, ychydig flynyddoedd yn ôl, i osod cornel rownd ar flwch y bu'n rhaid i chi ysgrifennu:
-moz-border-radius: 10px 5px;
-bebkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
radiws-gêm-ffin-waelod-chwith-5: 5px;
radiws ffin: 10px 5px;
Ond nawr bod y porwyr wedi cefnogi'r nodwedd hon yn llawn, dim ond y fersiwn safonol sydd ei angen arnoch chi:
radiws ffin: 10px 5px;
Mae Chrome wedi cefnogi eiddo CSS3 ers fersiwn 5.0, ychwanegodd Firefox mewn fersiwn 4.0, ychwanegodd Safari yn 5.0, Opera yn 10.5, iOS yn 4.0, a Android yn 2.1. Mae hyd yn oed Internet Explorer 9 yn ei gefnogi heb ragddodiad (ac nid oedd IE 8 ac is yn ei gefnogi gyda rhagddodiadau neu hebddynt).
Cofiwch y bydd porwyr bob amser yn newid a bydd angen dulliau creadigol o gefnogi'r porwyr hŷn oni bai eich bod yn bwriadu adeiladu tudalennau gwe sydd y tu ôl i'r dulliau mwyaf modern. Yn y pen draw, mae rhagddodion porwr ysgrifennu yn llawer haws na darganfod ac yn defnyddio camgymeriadau a fydd yn fwyaf tebygol o gael eu gosod mewn fersiwn yn y dyfodol, gan ei gwneud yn ofynnol i chi ddod o hyd i gamgymeriad arall er mwyn manteisio arno ac yn y blaen.