Свойства на доставчика и CSS хакове за Safari и Chrome

Малко допълнение към предишната бележка за CSS хакове за различни браузъри и фрагментирането на техните версии. По някаква причина, докато го пишех, не можах да намеря работещи хакове за двигателя Webkit, който е в основата на браузърите Safari и Chrome.

Ситуацията се подгрява и от факта, че Webkit поддържа много експериментални свойства на CSS3, които дават нови възможности на дизайнера на оформление.

Ще разгледам две опции за адаптиране на стилове за Chrome и Safari: префикси на доставчици и CSS хак.

Вендор префикси - Вендор префикси

Първо, ако трябва да коригирате поведението на стиловете заSafari илиChrome, препоръчвам да потърсите необходимото свойство с префикс на доставчик.

Например, webkit поддържа свойствата -webkit-margin-start и -webkit-padding-start, които са еквивалентни съответно на margin-left и padding-left. Единствената разлика е, че за писане отдясно наляво свойствата на доставчика ще работят с огледален ефект. Това е, например, -webkit-margin-start ще зададе полето надясно.

Пример:

Свойствата на доставчика липсват в спецификациите, което прави CCS кода невалиден.

Пълен списък е наличен в Safari CSS Reference. Между другото, има подобен документ за FireFox, наречен Mozilla CSS Extensions.

Ако префиксните свойства не са достатъчни, тогава можете да използвате следния css хак.

Работи във всички версии на Safari и Chrome, на които попаднах. Не съм тествал някои много стари версии на тези браузъри, разбира се, но не мисля, че това може да е от значение сега.

Коментари (1)

В борбата срещу префиксите, автоматичният префикс може значително да помогне, той обработва css, премахва ненужните префикси на доставчици идобавя тези, които липсват.