Якія яны і чаму вы павінны выкарыстоўваць іх
CSS прэфіксы, таксама калі - то вядомыя як або CSS браўзэр прэфіксы, з'яўляюцца спосабам вытворцаў браўзэраў , каб дадаць падтрымку новых функцый CSS , перш чым гэтыя функцыі цалкам падтрымліваюцца ва ўсіх браўзэрах. Гэта можа быць зроблена падчас свайго роду выпрабаванняў і перыяд эксперыментавання, дзе вытворца браўзэра, які вызначае, як менавіта будуць рэалізаваны гэтыя новыя магчымасці CSS. Гэтыя прэфіксы сталі вельмі папулярныя са з'яўленнем CSS3 некалькі гадоў таму.
Калі CCS3 быў першым ўводзіцца шэраг узбуджаных уласцівасцяў сталі дзівіць розныя браўзэры ў розны час. Напрыклад, WebKit харчаваннем браўзэры (Safari і Chrome) былі першымі, хто ўвесці некаторыя ўласцівасці анімацыі стылю, як пераўтварэння і пераходу. Пры выкарыстанні пастаўшчыка прыстаўкі уласцівасцяў, вэб-дызайнеры атрымалі магчымасць выкарыстоўваць гэтыя новыя магчымасці ў іх працы і іх бачылі ў браўзэрах, якія падтрымліваюць іх адразу, замест таго, каб чакаць, пакуль кожны вытворца браўзэра, каб дагнаць!
Такім чынам, з пункту гледжання вэб-распрацоўніка франтальнай, браўзэр прэфіксы выкарыстоўваюцца для дадання новых функцый CSS на сайт, маючы камфорт, ведаючы, што браўзэры будуць падтрымліваць гэтыя стылі. Гэта можа быць асабліва карысна, калі розныя вытворцы браўзэраў рэалізаваць ўласцівасці па-рознаму ці з іншым сінтаксісам.
CSS браўзэр прэфіксы, якія вы можаце выкарыстоўваць (кожны з якіх спецыфічны для іншага браўзэра), з'яўляюцца:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- IOS: -webkit-
- Opera: -о-
- Safari: -webkit-
У большасці выпадкаў выкарыстоўваць зусім новае ўласцівасць стылю CSS, вы бераце стандартны CSS ўласцівасць і дадаць прэфікс для кожнага браўзэра. У приставочных версіях заўсёды прыходзіць першым (у любым парадку вы аддаеце перавагу) у той час як нармальнае CSS ўласцівасць будзе ісці апошнім. Напрыклад, калі вы хочаце дадаць пераход CSS3 ў дакумент, можна выкарыстоўваць ўласцівасць пераходу, як паказана ніжэй:
-webkit- пераход: усе 4s лёгкасць;
-moz- пераход: усе 4s лёгкасць;
-ms- пераход: усе 4s лёгкасць;
-о- пераход: усе 4s лёгкасць;
пераход: усе 4s лёгкасць;
Заўвага: Памятаеце, што некаторыя браўзэры маюць розны сінтаксіс для пэўных уласцівасцяў , чым іншыя робяць, так што не думайце , што браўзэр-прыстаўку версія ўласцівасці сапраўды гэтак жа , як стандартныя ўласцівасці. Напрыклад, каб стварыць градыент CSS , можна выкарыстоўваць лінейны градыент-ўласцівасць. Firefox, Opera, а таксама сучасныя версіі Chrome і Safari выкарыстоўваюць гэтую ўласнасць з адпаведным прэфіксам, а раннія версіі Chrome і Safari выкарыстоўваюць прыстаўку ўласцівасць -webkit-градыент. Акрамя таго, Firefox выкарыстоўвае розныя значэнні, чым стандартныя.
Прычына, па якой вы заўсёды скончыць заяву з нармальным, ня-прыстаўкай версіі ўласцівасці CSS так, што, калі браўзэр не падтрымлівае правілы, ён будзе выкарыстоўваць гэты. Памятаеце, як чытаецца CSS. Пазнейшыя правілы маюць прыярытэт над больш раннімі, калі спецыфіка такая ж, так што браўзэр будзе чытаць версію пастаўшчыка з правіла і выкарыстоўваць яго, калі ён не падтрымлівае нармальны, але як толькі гэта адбудзецца, яна перакрывае версію пастаўшчыка з фактычнае правіла CSS.
Прэфіксы не зьяўляюцца Hack
Калі прэфіксы пастаўшчыка ўпершыню былі ўведзеныя, многія вэб - спецыялісты задаваліся пытаннем, калі яны былі хак або пераход назад у цёмныя дні разгалінаванне код вэб - сайта для падтрымкі розных браўзэраў (памятаеце тыя «Гэты сайт лепш за ўсё праглядаць у IE» паведамленняў). CSS пастаўшчыкоў прэфіксы ня пісакі, аднак, і вы не павінны мець ніякіх агаворак аб выкарыстанні іх у сваёй працы.
CSS-хак выкарыстоўвае недахопы ў рэалізацыі іншага элемента або ўласцівасці, каб атрымаць іншае ўласцівасць для правільнай працы. Напрыклад, скрынка мадэль хак эксплуатуе недахопы ў парсінга галасы сямейнай уласнасці або ў тым , як браўзэры сінтаксічнага слэш (\). Але гэтыя пісакі былі выкарыстаныя, каб выправіць праблему розніцы паміж тым, як Internet Explorer 5.5 апрацаваў блокавую мадэль і як Netscape інтэрпрэтаваць яго, і не маюць нічога агульнага з голасам сямейнага стылю. На шчасце, гэтыя дзве састарэлыя браўзэры з'яўляюцца тыя, што мы не маем праблемы самі з гэтымі днямі.
Прыстаўка пастаўшчыка не хак, так як гэта дазваляе спецыфікацыі ўсталёўваць правілы для таго, як гэта ўласцівасць можа быць рэалізавана, у той жа час дазваляючы вытворца браўзэраў рэалізаваць маёмасць па-іншаму, не парушаючы ўсё астатняе. Акрамя таго, гэтыя прэфіксы праца са ўласцівасцямі CSS , якія ў канчатковым рахунку быць часткай спецыфікацыі. Мы проста дадаем код для таго, каб атрымаць доступ да ўласнасці рана. Гэта яшчэ адна прычына, чаму вы ў канчатковым правіла CSS з нармальным, ня прэфіксам ўласцівасці. Такім чынам, вы можаце ўпасці з прэфіксамі версіі, як толькі поўная падтрымка браўзэра дасягаецца.
Хочаце ведаць, што падтрымка браўзэра для пэўнай функцыі ёсць? Сайт CanIUse.com з'яўляецца выдатным рэсурсам для збору гэтай інфармацыі і даючы вам ведаць, якія браўзэры і якія версіі гэтых браўзэраў, у цяперашні час падтрымліваюць функцыю.
Прэфіксы прыкрыя Але Часовыя
Так, ён можа адчуваць сябе раздражняе і паўторы, каб пісаць ад уласцівасцяў 2-5 разы, каб прымусіць яго працаваць ва ўсіх браўзэрах, але гэта часовая сітуацыя. Напрыклад, усяго некалькі гадоў таму, каб усталяваць закруглены кут на скрынцы трэба было напісаць:
-moz-мяжы радыус: 10px 5px;
-webkit-мяжы верхняга левага радыусу: 10px;
-webkit-мяжа-верхні правы-радыус: 5px;
-webkit-мяжы ніжняга правага радыусу: 10px;
-webkit-мяжа-ніжні левы-радыус: 5px;
мяжа радыусу: 10px 5px;
Але цяпер, калі браўзэры прыходзяць цалкам падтрымліваюць гэтую функцыю, вам сапраўды трэба толькі стандартызаваны варыянт:
мяжа радыусу: 10px 5px;
Chrome падтрымлівае ўласцівасць CSS3, пачынаючы з версіі 5.0, Firefox дадаў яго ў версіі 4.0, Safari дадаў яго ў 5.0, Opera у 10.5, IOS ў 4.0 і Android 2.1 ст. Нават Internet Explorer 9 падтрымлівае яго без прэфікса (і IE 8 і ніжэй не падтрымліваюць яго з або без прэфіксаў).
Памятаеце , што браўзэры заўсёды будуць змяняцца і творчыя падыходы да падтрымкі старых браўзэраў будуць неабходныя , калі вы не плануеце будаваць вэб - старонку , якія года за самымі сучаснымі метадамі. У рэшце рэшт, напісанне прэфіксаў браўзэра значна прасцей, чым знайсці і выкарыстанне памылак, хутчэй за ўсё, будуць выпраўленыя ў будучых версіях, патрабуючы, каб вы знайшлі іншую памылку эксплуатаваць і гэтак далей.