В данном видеокурсе собраны все технологии, которые неоднократно доказали свою эффективность. А благодаря наглядному формату видео-уроков вы сможете наблюдать за процессом создания сайтов для взрослых и с легкостью усваивать весь материал!
В этой статье я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.
В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera
9.2, Opera 9.5 и Safari 3 увидят каждый свой css.
Я создал css файлик, который в теле документа будет отображать или скрывать div`ы, соответствующие браузеру, таким образом можно легко отследить, все ли ок с хаком.
*:lang(ru) #lightMOD { display:
block } /* Хитрый селектор — все современные браузеры — не IE6 или IE7 */ html>/**/body #lightMOD { display: block } /* Вживленный комментарий — все современные браузеры — не IE6 или IE7 */
/* IE */
* html #lightIE6 { display: block } /* Лояльность разбора — будет работать в IE6 и в режиме quirks в IE7 */ *+html #lightIE7 { display: block }
body div.stopper { width: 100%; max-width: 1100px; min-width: 900px; *width: expression(document.body.clientWidth > 1100?
«1100px»: document.body.clientWidth < 900? «900px»: «100%»); /* оверрайд одного свойства — в данном случае это эмуляция min- и max-width */ }
/* FireFox */
@-moz-document url-prefix() {
/* для всех FireFox, вобщем-то можно и без этого уже, просто писать стиль,
благодаря обрамлению, обрабатываемому только FF */ #lightFF, x:-moz-any-link { display: block }
/* главное — ошибиться в регистре, работает только для ID */ #lightFF2[id=lightff2] { display: block }
/* Firefox 3 имеет новый селектор :default. Алярм, без обрамления IE поймет эту конструкцию */ #lightFF3, x:-moz-any-link, x:default { display: block }
}
/* Opera 9.5 */
/* not после @media не обрабатывается ничем, кроме Opera 9.5 — видимо так писать либо нельзя, либо не все еще ввели поддержку такого формирования, использовать с умом, не писать внутри потенциально кривых вещей, неровен час через ~полгода еще кто-то это сможет обрабатывать */ @media not all and (-webkit-min-device-pixel-ratio) {
#lightO95 { display: block }
}
/* Opera 9.2 */
/* Opera эту конструкцию не поддерживает, но Opera 9.2 по неизвестным причинам все равно обрабатывает — тоже рекомендуется быть внимательным */ @media all and (scan: progressive)
{
#lightO92 { display: block }
}
/* Safari */
/* Первая конструкция — против Opera 9.5, которая понимает вторую, а вторая — против Opera 9.2, которая понимает первую. Верх извратства :) Вобщем-то безопасная конструкция, т. к. 9.2 уже не
будет эволюционировать и явно не сможет обработать :first-of-type, а -webkit- — проприетарное свойство и обрабатывается Opera 9.2 скорее по ошибке, что следует из отсутсвия поддержки в 9.5 */ /* Safari понимает обе, поэтому хак работает */ @media all and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type #lightSF3 { display: block } /* вместо :first-of-type можно еще использовать :nth-of-type(1) — он для Safari 3.1 */
}
Код я более-менее подсветил…
Хаков для IE8 пока либо нет, либо он действительно будет хорош ;) в чем, правда, лично я сомневаюсь… MS собираются вводить свойства -ms- (одно из них -ms-box-model я уже даже воочию видел). Вобщем-то путь верный — такие
«грабли» самые безопасные.
Посмотреть в действии можно на http://www.dis.dj/css/ (справа висит блок с выводом, какие хаки подействовали).
Как справедливо заметили в комментариях, неплохо бы побольше описать суть проблемы. Итак, что же такое хаки и зачем они вообще, и чем чревато их использование.
Все хаки можно разделить на несколько категорий: 1. Хаки в чистом виде — использование лояльностей в обработке CSS правил парсерами браузеров (например — *width для IE) 2. Намереные дополнения
CSS, которые другой браузер не поймет чисто в принципе (особенно здесь рулит Mozilla со свойствами -moz- и офигенной штукой @-moz-document, которая позволяет не боясь ничего писать правила только под Mozilla) 3. Особенности поддержки браузерами нововведений CSS3 и иже с ними. Что касается IE6 — он и часть CSS2 не понимает (дочерний селектор E>F например)
Первая группа хаков ведет к невалидному CSS и вобщем-то безопасна к применению. Кривой код обрабатывать нужды нет, поэтому вменяемые браузеры
как пропускали такие вещи, так и будут. По крайней мере, раз уж сами MS не обрабатывают большинство хаков в режиме стандартов даже 7го IE, то можно не опасаться за их (хаков) будущее.
Вторая группа — пожалуй, самый безопасный вариант. Если только разработчики вдруг не надумают отказаться от своих же нововведений.
Третья группа — самый коварный и нежелательный пункт. Конструкции CSS Media Query — это официальный CSS3, который рано или поздно будут поддерживать все браузеры. Различные хитрые
селекторы тоже официально рекомендованы. Поэтому может настать момент, когда хак под один браузер будет интерпретироваться другими тоже. Яркий пример — Opera и Safari. Оба имеют частичную поддержку и отличаются в мелочах, правда благодаря которым стало возможно разделить правила для них. Иногда в этот вариант полу-хаков намеренно вводятся ошибки или неточности синтаксиса (как в случае с Opera 9.5). Это, конечно, убережет, в какой-то мере, от новых версий, но все равно не очешь хороший путь.
Личное мнение автора: хаки — зло, чем их меньше — тем лучше. Использовать надо только для IE6 когда надо реализовать то, что все умеют, а он нет (прозрачность, min-max-width и т. д.).
*
Книги
Веб-редизайн: книга Келли Гото и Эмили Котлер
Авторы: Келли Гото Эмили Котлер
Если вам случалось пережить
перепроектирование веб-сайта, подавившее вас беспорядком, перепутанными
сообщениями и постоянно меняющимися параметрами, эта книга должна быть у вас под
рукой. Почему? Да потому, что Келли Гото и Эмили Котлер предлагают четкий
работоспособный план, который поможет сберечь время, деньги и нервы.
Основной постулат этой книги - веб-дизайн
находится в постоянном движении - со временем подтверждается все убедительнее. В
первом издании говорилось, что цикл дизайна занимает 12 месяцев, а во втором он
сократился до полугода и даже трех месяцев. Именно поэтому сейчас как никогда
остро ощущается потребность в толковом и практичном руководстве, которое помогло
бы составить план и бюджет, организовать процесс веб-редизайна (или создания
сайта с нуля) и управлять им.
И это руководство перед вами! Веб-дизайнер
экстра-класса Келли Гото и ее соавтор Эмили Котлер делятся своим опытом,
предлагая эффективный подход к процессу веб-редизайна, учитывающий как
приоритеты бизнеса, так и интересы хорошего дизайна. Келли и Эмили
сосредотачивают внимание на пересечении этих сфер, попадая прямо в "яблочко".
Описанный в книге Базовый процесс применим к
любым веб-проектам - вновь создаваемым и перепроектируемым, от простых до самых
сложных. Книга поможет создать методологию для себя. Назовите ее планом, или
руководством. Авторы называют это "методологией, которая работает", потому что
так оно и есть. В книге много форм, контрольных списков и рабочих листов,
которые помогут извлечь практическую пользу из полученных знаний.
В книге представлены:
Базовый процесс - четко описанная,
универсальная последовательность действий, которую легко приспособить под
свои нужды.
Технические приемы, советы, контрольные
таблицы, опросные листы, рабочие таблицы и формы - все это подготовлено к
немедленному использованию, что поможет удержать проект в рабочем состоянии
на весь период редизайна.
Советы по переносу модифицируемого проекта из
рук команды веб-разработчиков под опеку команды сопровождения.
Учебные примеры, иллюстрирующие воплощение в
жизнь приемов из этой книги.
Советы по применению каскадных таблиц стилей
(CSS) и стандартов веб-дизайна в производстве сайта.
Новая глава об анализе требований к
функциональности для технически сложных проектов.
Формат: PDF
Качество книги: хорошее
Размер архива: 49.2 Mb
