CSS hack для Safari ТОЛЬКО

Я решаю одну задачу, и мне нужно создать кусок CSS, который будет применяться только в Safari, а не в другом браузере WebKit (не должен применяться в Chrome, f.e.). Пожалуйста, может кто-нибудь бросить какие-то идеи?CSS hack для Safari ТОЛЬКО

источник

2010-05-18 Jakub Lédl

Какая «задача»? –

Ну, я помогаю своему приятелю, который был каким-то глупым, и он создал смешанный макет с Divs + CSS и таблицами. Теперь я нашел способ получить эти таблицы прямо в Safari, но, с другой стороны, они полностью ошибаются в Chrome. –

Safari и Chrome используют тот же движок рендеринга, Webkit. Вы уверены, что выделили проблему? – ceejayoz

Возможно, вам будет лучше всего changing that particular property с javascript that verifies what browser you're on.

В противном случае один из других вопросов указал на this. Он позволяет вам указывать свойства CSS для каждого браузера, также используя javascript.

источник

2010-05-18 20:12:34

Да, но это разрешено только для [safari3] (я использую 4) или [сафари], который применяется для Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome. –

Посмотрите на javascript, который проверяет, в каком браузере вы находитесь. Выполняя это вручную, вы должны указать точное поведение, которое вы хотите. –

OmniWeb! Gadzooks! – Beska

Один из них должен работать:

html[xmlns*=""] body:last-child #widget { background:#f00; } 

html[xmlns*=""]:root #widget { background:#f00; }

источник

2010-05-18 20:23:27 mVChr

Обновлено Информация из-за изменений в веб-разработки, так как это было предложено и HTML5 стал новым стандартом:

html[xmlns*=""] body:last-child #widget { background:#f00; } 

html[xmlns*=""]:root #widget { background:#f00; }

Они работали отлично подходит для Safari 2 -3, но не более поздние версии сафари, которые появились позже. Они также требовали более описательной спецификации doctype/html. Вот предыдущий стандарт:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5 удаляет это, однако, с простым и довольно основными:

<!DOCTYPE html> 
<html>

Другими способами нацелены только Safari, а не Chrome/Opera, и работает в HTML5:

Это один по-прежнему работает должным образом с Safari 10.1:

/* Safari 7.1+ */ 

_::-webkit-full-page-media, _:future, :root .safari_only { 

    color:#0000FF; 
    background-color:#CCCCCC; 

}

Чтобы покрыть больше версий, 6.1 и выше, в это время вам придется использовать следующую пару css-хаков. Один для 6.1-10.0 должен идти с одним, который обрабатывает 10.1 и выше.

Итак - вот один я разработал для Safari 10.1+:

Запроса двойных СМИ важно здесь, не удаляйте его.

/* Safari 10.1+ (which is the latest version of Safari at this time) */ 

@media not all and (min-resolution:.001dpcm) { @media { 

    .safari_only { 

     color:#0000FF; 
     background-color:#CCCCCC; 

    } 
}}

Попробуйте это, если SCSS или другой набор инструментов имеют проблемы с вложенным запросом СМИ:

/* Safari 10.1+ (alternate method) */ 

@media not all and (min-resolution:.001dpcm) 
{ @supports (-webkit-appearance:none) { 

    .safari_only { 

     color:#0000FF; 
     background-color:#CCCCCC; 

    } 
}}

Следующего один работает на 6.1-10.0, но не 10,1 (Late обновление марта 2017)

<style type="text/css"> 

/* Safari 6.1-10.0 [not 10.1+] */ 

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media 
{ 
    .safari_only { 
     color:#0000FF; 
     background-color:#CCCCCC; 
    } 
}} 

/* Safari 6.1-7.0 */ 

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) 
{ 
    .safari_only {(; 
     color:#0000FF; 
     background-color:#CCCCCC; 
    );} 
} 

</style>

Эти комбинации css hacks на самом деле новы, начиная с этой публикации, я надеюсь, что людям это удобно. Смысл в том, что я сам их обработал много часов тестирования и подготовки, так что, возможно, вы видели части их, которые выглядели знакомыми там, это не было скопировано с какого-либо сайта в этой форме, но лично изменилось лично для достижения этого результата. Во время этой публикации Safari находится в версии 8, а Chrome - в версии 37.

Обратите внимание, что если вы используете устройство iOS (протестировано на iOS 7 & 8 платформах), Chrome отображает как Safari, поскольку он использует встроенный движок Safari. Это вовсе не «Хром», а то, что я вижу, но Safari с другим взглядом. Chrome хаки не влияют на него, только на Safari.Подробнее об этом здесь: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

А увидеть его работу:

<div class="safari_only"> 
    Only Safari shows up in blue on gray here. 
</div>

Живой тестовой страницы для этого и еще много CSS для разных браузеров хаки я работал на:

https://browserstrangeness.bitbucket.io/css_hacks.html#safari ИЛИ https://browserstrangeness.github.io/css_hacks.html#safari

источник

2014-06-14 07:55:38

Спасибо за полезный ответ – Rolf

Большинство приветствий - дополнения и обновления для Safari 8 выше в редакциях –

CSS hack для Safari ТОЛЬКО

ответ

Смежные вопросы