Незважаючи на екзотичність такого фільтра, він мені знадобився вже на двох проектах. Це, ясна річ, через те що у мене мак, і мені не все одно. Короткий брудний (невалідний і не future proof) але працює тут і зараз хак для Safari 2-3.
Навіщо це треба?
Ситуацій, в яких я він мені знадобився виявилося поки 2.
2. На цьому блозі я використовував для (всього) тексту шрифт Myriad. Дуже красивий і читабельний шрифт. Під виндой, однак, має абсолютно неадекватне і нечитабельне згладжування, здогадайтеся який скрін з вінди:
Фільтр ж дозволив мені хоча б для Сафарі користувачів (а це дизайнер і верстальник мого блогу =)) віддавати сайт в первозданному вигляді з Myriad. Решті ж показувати красивий Arial.
Фільтр є комбінацією двох фільтрів (Safari 2 і 3).
Відомо що Safari 2 дуже чутливий до сторонніх невалідним символам в CSS, настільки, що не читає код після них. Наприклад в ось такій конструкції:
Всі браузери зроблять параграф зеленим. в той час як в Сафарі 2 він залишиться червоним. Насправді замість # можна використовувати купу дивних символів, але яка різниця, якщо працює і цей. Зрозуміло, якщо ці три рядки написати на самому початку CSS, сафарі 2 його (файл) не прочитаєте зовсім. До того ж ніхто не заважає використовувати замість селектор, наприклад import, і віддавати цілий окремий CSS файл для Safari 2.
C Safari 3 все простіше. Він вийшов недавно, і як будь-який новий броузер підтримує силу-силенну цікавих CSS3 псевдокласів, до яких не додумалися ще поки Windows браузери, та й взагалі всі інші. А значить є велика ймовірність що найближчі кілька років їх буде підтримувати тільки він. Одне з таких властивостей:
Шрифт буде червоним тільки в Safari 3. Псевдоклас, до речі сам по собі екзотичний - зрозумілого теоретичного застосування йому я так і не придумав. Офіційне призначення:
The: first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element
Комбінація для Safari 2 і 3
Комбінуючи ці два фільтри, можна згодувати стилі тільки для Safari 2-3.
Ось як я роблю це на своєму блозі, що б милуватися Myriad:
Працює !. Незважаючи на малий відсоток Сафарі в цілому, є тенденція до того, що серед сучасних замовників він дуже поширений. В цілому, Safari дуже хороший і фільтри ці потрібні вкрай рідко.
Буду радий якщо хтось поділиться своїм досвідом!
Update v.2
Фінальна добірка фільтрів (спасибі Antejan і Mester):
- / * Зрозуміють тільки сафарі * /
- body: first-of-type .class<>
- / * Зрозуміють тільки сафарі * /
- html: root * .class <>
- / * Зрозуміють тільки сафарі * /
- html * .class <>
- / * Зрозуміють тільки сафарі і опера * /
- @media screen and (-webkit-min-device-pixel-ratio: 0)<.class <>>
- / * Зрозуміють тільки сафарі * /
- body: first-of-type .class<>
На даний момент з усіх перерахованих хаков працює тільки один:
найбільш вдалий на мій погляд спосіб написати css тільки для Safari 3 / Chrome:
@media screen and (-webkit-min-device-pixel-ratio: 0) body: first-of-type .clazz
>
По перше. Шрифт в інпут і тексареах теж треба поправити, залишився старий.
По-друге і головне. Я дивуюся пафосним арт-директорам, які не спромоглися за резонансними проектами і іншим БУТТЕР вивчити список з десятка шрифтів.
Чим додають головняка верстальщикам і користувачам сайтів. Ну який нахрен може бути міріад, Генн. Це ж не флеш, і не фотошоп, і навіть не твій сафарі зі своїм вбивчо стремним згладжуванням. пора б вже і розуміти що до чого, еб то!
І так, я стверджую, що можна робити охуенная сайти, використовуючи шрифти нормально працюють на всіх платформах, без ось цих ось перверсій.
Спасибі, інпут то я і прогледів =). Genn може і сам відповість, але це насправді більше "приємна дрібниця" для мене і користувачів сафарі, ніж "сайт на міріад", в своїх великих проектах я завжди міріад заміняв на Тахому або Ариал і навіть не замислювався. Поки не побачив міріади під Сафарі ...
Це ж особистий блог - де ще мені так можна перекрутити? =)
PS: про згладжування в Сафарі пов ти дарма =)
Субпіксельне згладжування це така штука, спірна. Залишимо його :)
У нотіфаях про коментах кодування всього службового тексту збивається, схоже що у самого шаблону кодування невірна.
Ну і непогано б зробити якір для коментів і давати в листі посилання на нього :)
Так, мої спроби зробити всюди UTF-8 поки не увінчалися успіхом =) Частково тому у мене до цих пір WordPress 1.5, тільки тссс ....
У сафарі під вінду, у мене відображається дуже згладжений Arial. інпут на уавебе виглядають як задумано. а, нестілізованние сабміта - як завжди мильниці ..
@ Давид: бебебе і вау) це я що б запитати, переборщив з жартами-глузувань вобщем =) Мені різниця здавалася такою очевидною - що ніякі бебе і вау не можуть збити вас з пантелику. У чому я мав рацію!
@ ОТО: Хак природно тільки під Мак Ос, бо сафарі під виндой згладжував б так само огидно "мій" міріади. Та й взагалі - хіба хтось серйозно ставиться до Сафарі під вінду? Це ж так ... іграшка.
@ Сергій: чи не Сомсу зрозумів про який саме некоректному відображенні ви говорите? Просто в моїх браузерах все зараз ок, був би дуже вдячний за допомогу у вказівці бага. (Або ви про гіпотетичний?)
/ * + Safari only * /
html * .class <>
/ * - safari only * /
/ * + Safari3 only * /
@media screen and (-webkit-min-device-pixel-ratio: 0) .class <>
>
/ * - safari3 only * /
За перший спасибі! додам в пост
А ось другий вже розуміє і opera 9 ... Потрібно це пам'ятати. Він не "safari3 only"
До слова, body: first-of-type розуміє і Opera 9.5
А ось @media screen and (-webkit-min-device-pixel-ratio: 0) моя Opera не зрозуміла, на відміну від, наприклад, @media screen and (min-width: 20px)
Наскільки мені відомо, воно розумілося саме 9й оперою, тобто майбутньої підтримки не буде, це ж спеціальний -webkit - ***
Обидва додав в пост, буде повний погляд на проблему.
Спасибі величезне Antejan і Kildor!
А з останнім апдейтом маку, поставився автоматом сафарі 3. Може пора забити на другий. Через місяць-півроку його частка буде незначною.
Згоден =) Але по своїй природі багато макюзери хочуть його купити, і тому перехід затягується. А я взагалі поки недостатньо насолодився тигром) тому сиджу на 2м Сафарі і Mac OS Tiger. Та й взагалі сафарі настільки хороший що хак цей швидше "прикол" ніж реальна потреба
Ех, а у мене Google Toolbar в Файерфоксе псує навіть оте гарне корічневенькое закруглення.
Так, мабуть таки ідея кастомизировать інпут утопічна :(
Я про останній апдейт Тигра :) Він успішно поставив Сафарі 3.
А можете підказати як подивитися сайт в сафарі на винде?
Ну типу сервіс який нитка або програмка ...
Маки у нас занадто не поширені - оптимізувати свої сайти під них почну тільки тоді, коли реально буде нічим зайнятися :)
Звичайно тобі хотілося зробити приємне всім, але чи варто це стількох зусиль?
Як це напряжно іноді бути веб-дизайнером ... розроблений єдиний стандарт, але кожен вважає, що має право ламати його посвоєму, а віддуватися ми :)
У загальному випадку ти маєш рацію звичайно =)
Але ... в даному приватному поміркуй сам - у мене мак, у дизайнера мак, ми разом робимо сайт ... =) І все ж у багатьох заможних клієнтів є маки - і вони звичайно побачать верстку в першу чергу під цією ОС, тому вирішив що не завжди , але іноді такі хакі знадобляться
Конструкцію html * .class <> Safari3win залишає без уваги ...
Уже в четвер буду на своєму маці - подивлюся. Адже ось, довіряй але перевіряй. Хоча я все ж схиляюся поки до несерйозного відношенню до віндового версії ...
html * .class <> - Safari + IE
html: root * .class <> - only Safari
html * .class <> - nevalidno
first-of-type - цей псевдоклас (як і будь-який інший мабуть) підміняється на: hover при наведенні миші. і рве ... як Тузик ганчірку
А що, псевдокласи не можуть застосовуватися одночасно? Ви щось плутаєте. Згадайте: hover і: first-child наприклад.
Або я вас неправильно зрозумів?
Я мав на увазі, що, якщо описані властивості для: first-child і для: hover, а вони [властивості], звичайно, різні, то при наведенні миші тюнінг для сафарі (то, що описано в: first-child) втрачається, а вступає в силу те, що описано для псевдокласу: hover
Нe мається на увазі використання:
Навряд чи хто то задає: hover для body ...
Аааа, тоді ясно, а то у мене не вийшло .class: first-of-type, тому, що він перетинався з .class: hover
Давайте більш детально визначимося з синтаксисом конструкцій html * .class <> і html: root * .class <>. У мене ці конструкції не розуміє жоден браузер ні в одній інтерпретації ... В яке місце цих чудо-директив вставляємо реальний селектор з властивостями? )
Створив сторінку з усіма фільтрами. в моєму Safari 3 всі блоки зелені. Це означає що сафарі 3 весь цей ЦСС сприймає. У Фаерфокс - всі червоні. В опері зелений блок по номером 4.
Поділіться скріншотом або наглядом? Safari 2 є у кого-то?
Юрій, спасибі. Знайшов свою помилку в синтаксисі. Конструкції html * .class <> і html: root * .class <> дійсно працюють.)
ще html: root .class <> - працює в Safari + Firefox
Дякую за добірку =) Як добре що все хакі в одному місці все ж не потрібні практично ніколи, було б дуже страшно запам'ятовувати такі конструкції)
А якщо мені треба хак для Сафарі для успадкованих класів, типу
h3.green .listing
Підійде тільки перший "брудний" варіант?
Коли вже лідери домовляться якось нарешті, і не треба буде під кожен браузер чогось дошліфовувати і допрацьовувати напилком. Не будучи шпеціалістом в html / css часом іде багато часу, щоб веб-сайт не перекособочівало і все всюди виглядало однаково.
А зараз ситуація трохи змінилася.
По-перше, -webkit-min-device-pixel-ratio: 0 розуміє Opera 9 до 9.5, по-друге, починаючи з 9.5 вона розуміє: first-of-type. Ну, а по-третє, крім Safari 3 все це розуміє і Chrome.
Тому, найбільш вдалий на мій погляд спосіб написати css тільки для Safari 3 / Chrome:
@media screen and (-webkit-min-device-pixel-ratio: 0) body: first-of-type .clazz
>
Opera 9 пройде через @media, але обламається на: first-of-type, а 9.5 відразу ж на @media.
А ось і скріншоти на підтвердження своїх слів.
Виправлення мінімальні:
@media screen and (-webkit-min-device-pixel-ratio: 0) body: first-of-type .n5 background: green;
>
>
.n5
До речі, може хто-небудь з користувачів / шанувальників Опери пояснити, як пробралася пропрієтарних (якщо я не помиляюся) -webkit- властивість в цей браузер?
html * ие розуміє впевнено
body: first-of-type селектор - Мозилла і опера теж в темі :)
body: first-of-type - хром теж шарить
Так що залишається тільки html: root *
[...] Також не працює в Chrome 2. Про причини використання такого хака і про інших хаках для сафарі можна дізнатися тут. [...]
А є якісь міркування, як написати хак для третього сафарі, який не працюватиме в четвертому?
[...] Також не працює в Chrome 2. Про причини використання такого хака і про інших хаках для сафарі можна дізнатися тут. [...]
Ну і що для версії типу 5 немає хаков :(?