Хаки для IE7


Содержание

Wiki-учебник по веб-технологиям: CSS/КроссбраузерностьCSSХаки .

Когда CSS используется не только для оформления текста, но и для работы со слоями при бестабличной верстке, необходимо помнить, чт осовременные браузеры не одинаково трактуют такие важные параметры как margin — внешний отсутп элемента, padding — внутренний отступ элемента, а также параметры position — положение, float — обтекание текстом и ряд других.

Из-за этих различий в трактовке значений параметров, часто случается, что сайты и веб-интерфейсы, которые нормально смотрятся в браузерах Mozilla Firefox, Opera и Safari, вдруг начинают разъезжаться в браузере Internet Explorer.

В основе этих различий в интерпретации браузерами CSS лежит неполное соотвествие браузеров Internet Explorer до версии 7 стандартам CSS, принятым W3C. Поэтому для успешной бестабличной верстки для более ранних версий IE, чем 7, требуется использовать ряд специальных конструкций, называемых CSS хаки. Важно также отметить, что и для других браузеров иногда случается необходимость использовать CSS хак.

Рассмотрим возможное написание CSS, которое было бы интерпретировано только отдельными видами браузеров:

Оглавление документа

CSS для IE 5, 5.5, 6, 7

Условные комментарии

Браузеры IE давно поддерживают так называемые условные комментарии (Conditional Comments), которые позволяют делать контент видимым только для IE. Условные комментарии – это просто специальным образом сформированные HTML комментарии, которые понимают только определенные версии Internet Explorer’a для Windows. Для примера вы можете использовать условные комментарии для исправления бага прозрачности PNG в IE.

Для их использования нужно :

  1. Сначала создать общую таблицу стилей для всех браузеров, без каких-либо хаков, чтобы потом продолжить работу по исправлению ошибок при отображении страницы в IE.
  2. Потом таблица стилей с исправленными ошибками сохраняется отельно и становится таблицей стилей для всех версий IE (например, all-ie.css).
  3. Сохраните отдельно таблицы стилей с исправлениями ошибок отдельно для каждой версии IE (например, ie-5.0.css).
  4. Далее необходимо последовательно подключить эти таблицы стилей через HTML-код с помощью условных комментариев.

Синтаксис условных комментариев

Приведенный условный комментарий будет понят браузерами IE5, IE5.5 и IE6, а также IE7 и IE8:

Применение CSS для IE5

Если вам необходимо применить условный комментарий только для IE5, то необходимо просто указать версию 5.0 в условии if IE 5.0:

Применение CSS для IE5.5

Если необходимо применить относительно IE5.5, то это будет выглядеть так:

Применение CSS для IE6

То же самое для IE6:

Применение CSS для IE5 и IE5.5 одновременно или для нескольких версий

Если требуется, используя условные комментарии, исправить баг с боксовой моделью в браузерах IE5 и IE5.5, то можно использовать часть индекса версии или операторы сравнения.

Первый пример подключит таблицу стилей к любой версии Internet Explorer’а первая цифра которой 5:

В качестве альтернативы, можно указать, чтобы таблицы стилей подключались к любой версии браузера, номер которой меньше 6-ти:

Вместо lt (less then — меньше) можно также использовать lte (less then or equal to — меньше или равен), gt (greater then — больше), gte (greater then or equal to — больше или равен) главное при всем этом многообразии возможностей правильно выбрать порядок указания условных комментариев, чтобы не попасть в ситуацию, когда для некоторых браузеров группы условных комментариев пересекаются, давая неожиданный результат.

Порядок использования

Если не требуется, чтобы общие таблицы стилей доминировали над таблицами, которые созданы специально для IE, то нужно подключать сначала общие таблицы, а уже потом таблицы для IE. На примере это выглядит так:

Другие достоинства этого метода

Валидность

Отладка условных комментариев

Существует одно предупреждение, о котором стоит упомянуть.

Если вы используете несколько версий Internet Explorer’а на одной машине, то все эти версии будут выдавать себя за самую новую из установленных версий. Это означает, что если вас установлен IE6, но вы просматриваете страницу с помощью IE5, выполниться этот условный комментарий:

А этот условный комментарий не выполниться:

Для наиболее точного отслеживания различий в обработке CSS разными версиями IE хорошо себя зарекомендовала бесплатная программа IETester, которая поддерживает все версии IE от 5 до 8. А для быстрого изменения праметров CSS в IE8 по нажатию F12 доступно средство разработчика, напоминающее FireBug в Mozilla Firefox.

Аналогично объявлению таблиц стилей, этим способом можно скрывать HTML код от определенной или всех версий IE. Например, надпись «HTML-код» будет отображаться во всех браузерах кроме IE6, если поместить её в условный комментарий следующим образом:

Следует помнить, что условные комментарии в IE можно использовать везде на странице, а не только для объявления таблиц стилей для соответствующей версии браузера. С помощью условных комментариев можно выводить пользователям IE какую-то дополнительную информацию, которая не видна пользователям других браузеров.

Аналогично условным комментариям в IE 5—IE 8 поддерживается тег . . Этот тег позволяет скрыть информацию от пользователей IE, таким образом код:

пользователям IE будет показан как: Это браузер Internet Explorer, а пользователям других браузеров — Это не браузер Internet Explorer.

CSS хаки IE

Чтобы не загромождать HTML-код объявлением нескольких таблиц стилей или, если требуется сохранить единственный CSS-файл можно написать отдельные стили, которые будут работать только в IE. Причем, есть вариант как для IE6, так и для IE7.

Для IE всех версий. Если поставить перед свойством две наклонные черты ( // ), оно будет восприниматься лишь браузерами IE всех версий. Другие браузеры такое свойство проигнорируют.


Для IE6 существует возможность поставить минус (-) или нижнее подчеркивание (_) перед свойством, при этом IE7 не отреагирует на него. Можно также использовать конструкцию:

В этом случае фон будет красным в браузерах Opera и Firefox, зеленым в IE7 и синим — в Internet Explorer 6.

В примере меняется цвет фона для разных браузеров. На практике же этот метод используется для того, чтобы добиться идентичности отображения и кроссбраузерности. Чаще всего приходится прибегать к нему при позиционировании и задавать разные значения свойств типа left, top, padding, margin, width и других, связанных с размерами, процентами и пикселами.

Для IE7 используется CSS хак:

CSS для Firefox

Также существуют специальные CSS хаки, позволяющие показывать стили только браузеру Firefox.

Для быстрого изменения праметров CSS в Firefox по нажатию F12 доступно (требует предварительной установки) средство разработчика Firebug — является лучшим среди аналогов.

CSS для Opera

CSS хаки для браузера Opera представлены следующими примерами:

или (но эту конструкцию видят и современные Mozilla Firefox)

Чтобы было видно только браузеру Opera версии от 10 и выше (на более ранних не тестиорвалось) надо писать так:

можно загрузить целый css, как это делали для IE:

и, наконец, можно воспользоваться /Java Script, в котором загрузить нужные таблицы стилей:

Для быстрого изменения праметров CSS в браузере Opera также доступно средство разработчика. Для его открытия надо перейти в меню «Инструменты» — > «Дополнительно» — > «Средства разработки».

Добавить стили для IE 10 и IE 11

Иногда бывают такие ситуации, когда нужно написать стили только для конкретного браузера. Мы с вами знаем для какого браузера это приходится делать чаще всего:)

Но еще хуже, когда нужно определить не только браузер, но и конкретную версию. Для этого есть браузерные «хаки» или «хуки». Сегодня мы научимся писать определенные стили для версии браузера Internet Explorer 10 и 11. Давайте посмотрим как это можно сделать.

Для решения этой проблемы мы будем в css использовать специальную условную конструкцию, а точнее медиазапрос для IE10, 11. Он выглядит вот так:

Вставляем ее в нужное место наших стилей и теперь все, что остается сделать, это вместо строки /* IE10+ CSS styles go here */ написать те правила css которые вы хотите применить только к IE 10 и к IE 11. Вот и все. Достаточно просто.

Какие CSS-хаки для IE 6 и 7 являются перспективными?

Какие CSS-хаки для IE 6 и 7 являются перспективными? Я имею в виду, если я использую тогда, они никогда не будут создавать никаких проблем, и их патч никогда не будет реализован?

управление 2 CSS один для всех и один для IE занимает много времени, а также добавляет одну дополнительную таблицу стилей. и если какой-либо хак может решить проблему в основном CSS, то это экономит время, и когда над одним проектом работают несколько человек, большую часть времени мы забываем вносить изменения и в условный CSS.

я не спрашиваю о состоянии таблицы стилей

6 ответов

Возможно, для Вашего проекта будут необходимы бесплатные векторные карты. На нашем сайте представлены карты для всех стран.

никто.
использование IE условные комментарии чтобы вставить ваши версии (не каламбур .. ну, может быть, немного) стили ..

[Обновить]
Дополнительные примечания к вашему измененному вопросу. Это может занять много времени, но это лучшая практика (кстати, многие из хаков не являются действительными CSS) ..

Использование хаков никогда не может быть гарантировано, даже для тех же основных версий браузера. Маловероятно, что они исправят ошибку CSS в IE6 в будущих минорных выпусках, но все же вы не можете быть на 100% уверены.

Существует альтернатива (поначалу, возможно, более длительная), комментирует IE, но это действительно лучшая практика.

Кроме того, подумайте о других программистах в вашей команде, которые все должны знать, понимать и запоминать в будущем одни и те же хаки. Со временем обслуживание хаков будет занимать больше времени, чем сохранение отдельных версий нарушающих правил в других файлах. ..

Хаки — это хаки, нет никакой гарантии, будут ли они проверены на будущее. Дело в том, что вы должны максимально сократить использование хаков, причина проста, они не могут быть ориентированы на будущее. Разве вы не видите различий между взломами IE6, IE7 и IE8, у них у всех разные взломы, не сохранились все взломы из предыдущих версий. То же самое верно и для других браузеров.

Вообще говоря, никто не. Но и не должно быть, специальное кодирование для определенных браузеров не является хорошей идеей.

Если вам необходимо создать код для особого случая, то лучше всего использовать библиотеку, такую ​​как jQuery, и использовать один из их тестов функций. Не делайте «если не IE6», вместо этого делайте «если не поддерживает скругленные углы»

Я не могу думать о собственности, начинающейся с подчеркивания в будущем.

Все, что связано с переопределением атрибута CSS позже в коде, просто следует стандарту CSS и поэтому является перспективным.

Однако это работает только при использовании функций, которые недоступны в старых браузерах, и не при работе с ошибками, специфичными для браузера. Чтобы убедиться, что конкретные версии вашего CSS используются конкретными версиями Internet Explorer, используйте условные комментарии.

Никогда/всегда в чате, отдельный файл для каждой модели браузера быстро разваливается из-за обслуживания.

CSS хаки для IE

На этой странице описаны CSS хаки для IE, используя которые можно назначить HTML-элементу какие-то свойства, понимаемые только этим браузером, но игнорируемые другими.

CSS хаки для IE6

Браузер IE6 имеет больше всего багов и проблем с пониманием стандартов W3C, хотя для своего времени он был очень неплох.


Хак с применением правила CSS !important

IE6 игнорирует правило CSS !important, когда внутри селектора присутствует одно и то же свойство более одного раза. В этом случае он поступает просто и использует значение того свойства, которое находится в коде ниже других, независимо от того указан для него приоритет или нет. Соответственно, если сначала указать свойство с приоритетом, а ниже написать его же, но без приоритета, то все браузеры выберут первый вариант, а IE6 — второй. В итоге имеем валидный, соответствующий синтаксису CSS хак для IE6.

Хорошо, но как же поступить, если надо применить к элементу какое-то свойство, которое должно сработать только в IE6, а в других браузерах оно вообще не нужно? Все очень просто. Сначала, как обычно, пишете это свойство с !important, но указываете у него значение, которое оно имеет по умолчанию, а ниже пишете его же, но с необходимым вам значением. Вот и все. Кстати можно поступить и наоборот, задав для всех браузеров нужное значение свойства, а для IE6 установить по умолчанию. Все зависит от того, что вам надо.

Пример HTML и CSS: хак для IE6 и правило !important

Хак с применением селектора * html

Этот CSS хак для IE6 связан с применением универсального селектора, который ассоциируется в CSS сразу со всеми HTML-элементами на странице. Однако если его использовать в создании селектора потомков, где указать перед селектором html , то это будет противоречить всякой логике, хотя синтаксис CSS и не будет нарушен. Ведь получается, что таким объявлением мы говорим браузерам, что на странице присутствуют элементы, которым тег является потомком. Естественно этого не может быть, так как данный тег — это корневой элемент HTML-страницы, и все браузеры это понимают и игнорируют такой селектор, но только не IE6.

Пример HTML и CSS: хак для IE6 и универсальный селектор

Хак с применением дочернего селектора

IE6 не понимает дочерние селекторы, что является отличным поводом для создания хака, если мы хотим, чтобы он «не видел» какие-то селекторы с определенными свойствами.

Пример HTML и CSS: хак для IE6 и дочерний селектор

Хак с применением подчеркивания или дефиса

Этот CSS хак для IE6, использует особенность данного браузера распознавать свойства CSS, перед которыми ставится знак подчеркивания (_) или дефиса (-).

Пример HTML и CSS: хак для IE6 и свойства с подчеркиванием или дефисом

CSS хаки для IE6 и IE7

Как и другие браузеры, семейство IE понимает некоторые хаки, сразу несколькими версиями. Здесь мы рассмотрим те, которые поддерживают шестой и седьмой Internet Explorer.

Хак с применением CSS expression

Вообще, это не совсем хак, так как CSS expression — это внедренная в браузер технология, которая позволяет использовать скрипты прямо внутри CSS. Эти скрипты указываются вместо значения у свойства и применяются для его динамического расчета. То есть то, что высчитает скрипт, в итоге и становится значением. Таким образом можно заткнуть многие дыры шестого и седьмого IE, но помните, что expression замедляет (иногда серьезно) работу браузера, поэтому лучше подключать его через условные комментарии. Да и вообще вместо хаков лучше использовать условные комментарии.

Пример HTML и CSS: CSS expression в IE

Как вы знаете, IE6 не понимает свойство CSS min-width, поэтому в данном примере скрипт внутри expression высчитывает необходимое значение и подставляет его в свойство width.

Хак с применением символов слеша и звездочки

Если перед CSS-свойством поставить слеш (/) или звездочку (*), то поймут его только IE6 и IE7, на чем и основан данный хак.

Пример HTML и CSS: хак для IE6 и IE7 со слешем и звездочкой

Хак с применением символа !

Если через пробел после значения свойства CSS поставить восклицательный знак (!), то его не проигнорируют только браузеры IE6 и IE7. Эта особенность и послужила для создания хака.

Пример HTML и CSS: хак для IE6 и IE7 со знаком !

CSS хаки для IE7

Здесь поговорим о CSS хаках, которые понимает только IE7.

Хак с применением универсального и соседнего селекторов

Internet Explorer начал поддерживать соседние селекторы с версии 7.0, однако с этой поддержкой в Microsoft немного переборщили. Дело в том, что если для создания соседнего селектора использовать универсальный селектор и селектор тегов html , то он не должен работать, ведь у тега не может быть соседей ( не в счет). Однако в IE7 такое сочетание работает, что и было использовано для очередного хака.

Пример HTML и CSS: хак для IE7 с универсальным и соседним селекторами

Хак с применением универсального и соседнего селекторов + :first-child

Этот хак похож на предыдущий, только в селектор добавился псевдокласс CSS :first-child.

Пример HTML и CSS: хак для IE7 с псевдоклассом CSS :first-child и универсальным и сосоедним селекторами

CSS хаки для IE8

IE8 уже довольно хорошо поддерживает стандарты W3C, однако и в нем иногда приходится использовать хаки, чтобы устранить некоторые погрешности.

Хак с применением идентификаторов

Если в таблице стилей поставить рядом (без пробелов) два идентификатора, то согласно синтаксиса CSS это будет означать, что мы хотим применить стили к HTML-элементу, который содержит оба этих идентификатора одновременно. Но синтаксис HTML не предусматривает наличие у одного элемента сразу двух идентификаторов (в отличие от классов), поэтому по логике вещей такое указание браузерам надо игнорировать. И IE8 с этим согласен, то есть он воспринимает такое указание, как ошибку, а вот остальные браузеры — нет.

А теперь о самом хаке. Если в CSS указать нужный селектор, а через запятую от него слитно написать два идентификатора, то IE8 не воспримет подобные стили и пропустит все, что находится в скобках. Таким образом можно создавать CSS, который поймут все браузеры кроме восьмого Эксплорера.

Пример HTML и CSS: хак для IE8 с идентификаторами

CSS хаки для IE8 и IE9


Хаки, которые одновременно понимают браузеры IE8 и IE9.

Хак с применением символов \0/

Если в конце значения свойства поставить знаки \0/ , то все браузеры его пропустят, кроме IE8 и IE9.

Пример HTML и CSS: хак для IE8 и IE9 с символами \0/

CSS хаки для браузеров

Любой, кто занимался Web-дизайном, сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один «гадёныш» уродует страницу. Чаще всего этим «гадёнышем» становится браузер Internet Explorer, особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользователей Интернета. Согласитесь, что это весьма много, чтобы просто так на них забить. Хотя и другие браузеры (даже современные) иногда показывают сюрпризы. Поэтому для того, чтобы любой браузер правильно отображал Вашу страницу и были придуманы CSS хаки.

CSS хак — это специальный синтаксис стиля CSS, который понимает только один определённый браузер. Причём CSS хаки даже часто различаются для разных версий одного браузера.

Однако, прежде чем перейти к CSS хакам, хочется рассказать о другом способе разделения стилей, который более предпочтителен: с использованием PHP или JavaScript, в которых мы можем определить тип и версию браузера, и уже, в соответствии с этим, подключать соответствующий файл стилей. Данный способ рассматривать не будем, так как для того чтобы понять его, необходимо иметь минимальный набор знаний по этим языкам.

Ещё один способ связан с тем, что главным «дезертиром», как правило, является IE. Поэтому для него придуман отдельный способ, даже без использования скриптов. Заключается он в условных комментариях в голове документа (внутри тега ). Работает он только для браузеров IE, но, как правило, с ними и бывают проблемы, поэтому данный способ можно встретить очень часто. Выглядит он таким образом:

Если перевести на русский язык, то будет примерно так: «Если браузер пользователя — IE, то подключить таблицу стилей из файла css/ie.css«.

Если необходимо указать конкретную версию браузера, то вместе с «IE» необходимо поставить ещё и номер версии. Например так:

Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6. Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:

Данный стиль будет применён для всех версий браузеров IE ниже 6-ой версии. Если бы вместо «lt» поставили «lte«, то это бы означало ниже или эквивалентно 6-ой версии.

В большинстве случаев, данных знаний уже достаточно, и надо стараться, чтобы не требовалось большего. Однако, существуют ситуации, когда данные способы не совсем разумны. Например, при ситуации, когда в огромном CSS файле, всего лишь 1-2 стиля нуждаются в особенном виде для отдельных браузеров. Глупо в таком случае создавать отдельный огромный файл, который потом подключать через скрипты или через такие условия. Вот поэтому и были придуманы CSS хаки для браузеров, к которым мы сейчас и переходим. И начнём мы с:

1) Internet Explorer. Данный CSS хак работает для версий IE7 и ниже. Как показывает мой опыт, браузер IE8 уже очень приличный, поэтому с ним у меня ещё проблем не возникало. А вот для браузеров IE7 и ниже показываю хак:

p <
margin-top: 20px; # Для всех браузеров
* margin-top: 30px; # Для браузеров IE7 и ниже.
>

Как видите перед вторым свойством «margin-top» стоит символ «*«. Это и есть CSS хак. То есть если поставить «*» перед именем свойства, то данное свойство будет применено только для браузеров IE7 и ниже. Вывод: для всех браузеров «margin-top» будет в значении «20px«, а для браузеров IE7 и ниже в значении «30px«. Если требуется указать стиль только для IE6 и ниже (это часто бывает, потому что с IE7 гораздо лучше дела обстоят и чаще всего править стиль для этого браузера не требуется), то существует другой CSS хак:

p <
margin-top: 20px; # Для всех браузеров
_margin-top: 30px; # Для браузеров IE6 и ниже.
>

Как не трудно заметить, перед вторым свойством стоит знак «_», который и является CSS хаком для браузеров IE6 и ниже.

2) Mozilla Firefox. Данный CSS хак работает только для браузеров Mozilla Firefox. Вот его пример:

p, x:-moz-any-link <
margin-top: 30px;
>

В данном примере сообщается, что стиль к селектору «p» будет применён только для браузеров Mozilla Firefox, а все остальные браузеры данный стиль проигнорируют.

3) Opera. Этот CSS хак используется для браузеров Opera. Пример его использования:

Здесь я думаю, что также всё понятно.

Вот и всё, что хотелось написать в этой статье. Однако, ещё раз напоминаю, что CSS хаки — это плохо, очень часто они не проходят при проверке валидности кода, а это уже не есть хорошо. В общем, старайтесь их не использовать при создании сайта или использовать только в самом крайнем случае. А, вообще, рекомендую Вам ознакомиться с основами CSS, тогда у Вас будет меньше проблем, связанных с разным представлением стилей у браузеров.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 69 ):

    Там в условных комментариях надо два тире поставить: . И где указываются в квадратных скобках версии IE нужен пробел перед цифрой: [if IE 6] А то не работает ни фига!

    Спасибо, уже дописано.

    А можно написать только один хак на всю страницу? Или можно все написать, чтобы любой браузер отображал всё правильно?

    Хаки — это плохо, поэтому чем меньше их — тем лучше. В идеале, их вообще быть не должно. Все хаки смысла писать не имеет, так как в большинстве случаев браузеры очень похожи. И для них стили будут одинаковыми.


    Спасибо! Кстати, можете объяснить почему у меня изображения не отображаются в Mozilla Firefox?

    Если на всех сайтах не отображаются, то, значит, показ изображений выключен в настройках. Если на одном конкретном сайте, то здесь вариантов бесчисленное множество.

    А где тут «Настройки»?

    Инструменты/Настройки/Содержимое. Должен быть включён чекбокс «Автоматически загружать изображения».

    «Инструменты» есть, а «Настройки» и «Содержимое» нету. Может я где-то не там ищу? Я ищу в мозилле.

    В меню Инструменты есть пункт «Настройки». Кликайте по этому пункту, а дальше откроется окно, в котором выберите вкладку «Содержимое».

    Семантическая верстка — советы и решения. Хаки для IE. Часть вторая

    CSS-хаки

    При использовании семантической верстки каждый разработчик обязательно столкнется с проблемами кроссбраузерности, для решения которых в большинстве случаев приходится использовать так называемые «хаки». Обычно под этим термином подразумевается особый способ написания селекторов или правил, понимаемый только конкретным браузером. Однако совместимость с CSS в большинстве браузеров уже достигла уровня, при котором следует ограничивать использование «хаков».

    Как правило, основным источником неприятностей бывает Internet Explorer. Многообразие ошибок в реализации CSS в браузерах Microsoft удивляет даже самых опытных верстальщиков. В связи с этим возникают ситуации, когда необходимо использовать дополнительные или альтернативные правила для IE. Именно в таких случаях рекомендуется применять «хаки». Если же вам вдруг понадобились альтернативные правила, скажем, только для Firefox, то рекомендуется пересмотреть ваш код, и в 99% случаев вы найдете более элегантное решение.

    Наиболее популярным хаком на сегодня остается так называемый «star html hack»:

    В валидных HTML- и XHMTL-документах селектор HTML всегда играет роль корневого элемента, а BODY — потомка первого уровня, но не второго или более высокого уровня. Таким образом, теоретически селектор «* HTML» не должен применяться ни к одному элементу. Но на практике IE пятых и шестых версий из-за ошибки в собственном движке интерпретируют данный селектор как HTML и применяют указываемые правила. Поскольку остальные современные браузеры селектор «* HTML» игнорируют, этот прием можно использовать в корыстных целях. Это полезно, но правильно ли?

    Несмотря на то что данный хак корректен с точки зрения стандарта CSS, есть ряд негативных нюансов.

    Во-первых, слово «хак» звучит странно, и разработчику уже это должно не понравиться.

    Во-вторых, такие хаки для браузера Internet Explorer засоряют код, подгружаемый и всеми остальными браузерами.

    В-третьих, в этом хаке игнорируется недавно вышедший Internet Explorer 7.0, где был исправлен целый ряд ошибок в модуле CSS (более подробно об этом вы можете почитать непосредственно в блоге разработчиков IE7 по адресу blogs.msdn.com/ie).

    Как же укротить Internet Explorer, не используя хаки?

    Альтернативный выход

    В недрах Microsoft Developer Network есть решение получше — conditional comments. Данная технология поддерживается в Internet Explorer, начиная с пятой версии, тем самым охватывая все интересующие нас браузеры. Ниже приводится пример элегантного использования условных комментариев:

    Обычное подключение CSS-файлов, однако увидят вторую строку, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии — if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше (включая свежий седьмой) прочитают код, находящийся внутри комментария и интерпретируют его.

    Таким образом все наши хаки можно вынести в отдельный файл:

    style.css:

    ie.css:

    Теперь мы не используем хаки в основном листе стилей; добились того, что альтернативное правило было применено ко всем Explorer’ам, включая седьмой; а также избавили пользователей альтернативных браузеров от загрузки лишнего кода. При этом мы сохранили наш (X)HTML и CSS валидным, так как такой условный комментарий не распознается никем иным кроме IE, включая даже валидатор от W3C.

    Условные комментарии гибче, чем кажется на одном примере. Вы можете охватить не только все Explorer’ы, но и все его версии ниже или выше определенной или конкретную его версию; а также подгрузить код, который будут интерпретировать все браузеры, кроме Internet Explorer. К сожалению, это уже тема для отдельной статьи и с этими возможностями читателю следует ознакомится самостоятельно.

    Материалы для изучения:

    Укрощаем Internet Explorer или «чудесные правила»

    Как уже говорилось выше, больше всего проблем верстальщику доставляют браузеры от Microsoft. Как добавить отдельные правила только для Internet Explorer, вы уже знаете. Теперь рассмотрим, какие правила смогут помочь нам с укрощением IE.

    Все перечисляемые ниже элементы управляют свойством hasLayout. hasLayout не является частью стандарта CSS и является скорее майкрософтовской «заплаткой» для веб-разработчиков. Но спасибо и на том

    Ниже перечисляются только названия багов, для исправления которых применяются данные правила. Более подробное описание указанных багов вы можете найти по адресу positioniseverything.net/explorer.html.

    position: relative

    • The IE/Win Disappearing List-Background Bug
    • IE6 Border Chaos

    Данное правило также часто применяется для спонтанно пропадающих блоков. Не падающих или неправильно отображающихся, а именно пропадающих. Особенно грешит этим Internet Explorer 5.0.

    height: 1%

    • The IE6 Three Pixel Text-Jog
    • The IE Escaping Floats Bug
    • IE and italics (будьте осторожны с 5.0, используйте экранирование)
    • IE/Win Unscrollable Content Bug
    • IE/Win Guillotine Bug
    • Quirky Percentages in IE6’s Visual Formatting Model

    Применяется также для клиаринга элементов. Задается контейнеру, содержащему float’ы.

    display: inline

    • Floats, Margins and IE
    • The IE Doubled Float-Margin Bug


    display: inline-block

    • Quirky Percentages in IE6’s Visual Formatting Model

    zoom: 1

    • Аналог height: 1% для IE 7.

    И еще пара советов:

    Во-первых, используйте данные правила по-возможности только для IE. Причем для разных версий решение может отличаться (чаще это относится к height: 1% и zoom: 1 ).

    Во-вторых, столкнувшись с нежелательным поведением Explorer’а, которому нет документированного объяснения (или вам просто лень его искать) — попробуйте последовательно применить к проблемному элементу все правила, влияющие на свойство hasLayout. Псоледовательный метод перебора очень часто используется в нашей професии.

    CSS хаки. Как задать CSS стили для разных браузеров

    Приветствую вас, читатель моего блога!
    Эта статья о том, как можно задать отдельные CSS стили для разных браузеров, используя CSS хаки. Я дам несколько примеров CSS хаков, и расскажу об их особенностях. А также покажу альтернативные способы решения проблемы задания отдельных CSS стилей для определённых браузеров.

    Что такое CSS хаки и для чего они нужны?

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

    Для того чтобы решить данную проблему можно использовать специальные css хаки, благодаря которым можно прописать определённые стили только для определённого браузера. При этом все остальные браузеры эти стили просто проигнорируют.

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

    Например, если мы напишем:

    То во всех браузерах для элемента с классом block применится сплошная красная рамка, толщиной в 2 пикселя.

    Однако возможно, что в одном из этих браузеров (например Mozilla Firefox) эта рамка будет выглядеть более толстой, чем в остальных или из-за её добавления один из блоков соскочит на новую строку и т.д. при этом в остальных браузерах всё будет отображаться нормально.

    Если мы пропишем данные правила следующим образом:

    То во всех браузерах у элемента с классом block отобразится рамка толщиной в 2 пикселя, а в браузере Mozilla Firefox отобразится рамка в 1 пиксель и таким образом это решит проблему.

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

    Применение CSS хаков целесообразно, в первую очередь, для исправления различных глюков самих браузеров.

    CSS хаки для Internet Explorer

    Данный браузер является одним из тех, которые доставляют больше всего проблем верстальщикам, так как он не поддерживает некоторые свойства CSS3 или отображает их по своему.

    Я нашла несколько CSS хаков для этого браузера и ни один из них у меня не сработал!

    Если хотите, можете сами попробовать. Вот эти CSS хаки:

    Во всех этих вариантах вместо .block вы пишете название класса или ID того блока, для которого вы задаёте стили.
    Вместо border:1px solid red; — пишете свои CSS стили

    К счастью для этого браузера есть более надёжное решение. Он умеет понимать код, находящийся в условных комментариях, что позволяет нам задать определённые стили только для этого браузера.

    Код условных комментариев выглядит так:

    Данный код рассчитан на все версии Internet Explorer
    дословно этот код можно перевести как «Если браузер Internet Explorer» Если нам нужно чтобы стили применились только для определённой версии IE, то мы пишем

    Данные стили сработают для браузера Internet Explorer версии 7. Если вам нужно прописать стили для другой версии то вместо «7» вы ставит ту версию, которая нужна.

    CSS хак для Mozila Firefox

    Основной отличительной особенностью данного браузера является то, что по другому отображает шрифты из за чего ширина блоков может немного меняться, а текст перескакивать в две строки или не помещаться в определённый блок. Для того чтобы задать стили только для Mozila Firefox в CSS файл пишем следующий код:

    Вместо .block пишем класс или ID элемента, для которого нужно задать стиль.

    CSS хак для GoogleChrome

    Для того чтобы прописать CSS стили только для Chrome можно использовать следующий хак:

    CSS хаки для Opera

    У этого браузера основной проблемой является то, что в разных версиях отображение страницы может меняться. И CSS хаки для разных версий будут отличаться.

    Для версии Opera 10 можно попробовать:


    Для более ранних версий есть следующие варианты: Opera 9.2 и младше

    Ещё вариант:

    Есть ещё такой хак:

    Но его видит так же Mozilla последних версий и Chrome, поэтому не советую его использовать!

    Я перепробовала все эти хаки, но для Opera найти универсальный CSS хак так и не удалось. Поэтому я решила написать скрипт, который позволил бы подключать тот или иной CSS файл для каждого браузера по отдельности и в следующей статье я поделюсь им с вами.

    На что обратить внимание при использовании CSS хаков.

    CSS хаки конечно часто решают проблему с одинаковым отображением элементов и стилей в разных браузерах, но это решение проблемы – не самое надёжное, так как вы не можете быть уверенными на 100% что данный CSS хак будет работать в новых версиях браузеров, кроме того если вы пишете CSS хак для Firefox, к примеру, то вполне вероятно что когда выйдет новая версия Chrome или Opera то они тоже будут видеть и отображать этот хак.

    Так что используйте их только в крайних случаях и с осторожностью.

    В качестве альтернативного решения проблемы могу посоветовать использование скрипта для определения браузера и подключения соответствующего файла стилей.

    Более подробно об этом я напишу в моей следующей статье.

    Надеюсь, что данная статья была для вас полезной и теперь вам будет немного проще подогнать свою вёрстку под разные браузеры. Желаю вам успешной вёрстки и хорошего настроения :)

    Что такое CSS-хаки?

    Дата публикации: 2020-04-22

    От автора: если вы уже во front-end разработке хотя бы пару лет, вы, скорее всего, уже использовали CSS-хаки. Однако если вы еще новичок, вы могли слышать данный термин, но до конца не понимаете его значение. В этой статье я объясню, что такое CSS-хак, и как им пользоваться. Но сначала я объясню, почему решил написать эту статью.

    Разработчики неправильно понимают значение термина

    Как многие из вас слышали, недавно на сайте SitePoint были опубликованы результаты большого опроса по CSS, а я обобщил их в отдельной статье. Одним из вопросов был: Под какие из следующих браузеров от Microsoft вы пишите CSS-хаки?

    Когда я первый раз обработал результаты опроса, я пропустил маленькую неточность в ответах к этому вопросу, однако David Storey, инженер из Microsoft, который принимал участие в создании их нового браузера, обратил на это внимание. Проголосовало 1 418 человек, а результаты были следующие:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Результаты неутешительные: плохо, что более 60% разработчиков пишут CSS-хаки для IE9 и IE10. Но Edge получил 45%? Для Edge есть некоторые опубликованные хаки, но их еще нет на сайте Browserhacks. Крайне необычно, что столько людей используют хаки для этого браузера. Возникает более серьезный вопрос: С какими такими проблемами рендеринга CSS сталкиваются разработчики в Edge, что им приходится прибегать к хакам?

    Сначала я подумал, что люди путают хаки с функцией обнаружения браузера. Но даже это не объясняет такие высокие цифры для Edge.

    Потом я понял, люди, должно быть, не до конца поняли вопрос; люди думают, что «CSS хаки для браузера Х» то же самое, что «Поддержка браузера Х». Другого логического объяснения быть не может, особенно если учесть большие проценты у других браузеров, которым не нужны хаки.

    Давайте всем тем, кто путается в понятиях, дадим точное определение, что такое хак.

    Что такое CSS-хак?

    Хак – это какой-то код в файле CSS, стили которого применяются только к указанным браузерам, а другими игнорируется. Разберем пример. Это CSS-хак:

    Код CSS выше (также известен как хак «*-html ») применится только к браузеру IE6 и ниже. Большинство разработчиков, поддерживающих IE 6, не волнуют более ранние версии, так что можно считать, что этот хак только для IE6.

    Тут хак это символ звездочки, стоящий перед «html». Это комбинация универсального селектора и селектора типа. Кто-то обнаружил, что эти два селектора вместе делают так, что заданные селекторы работают только в определенных версиях IE, а другими браузерами игнорируются. Т.е. левый внешний отступ у .sidebar в примере выше будет только в IE6 и ниже. CSS код написан правильно, и сообщений об ошибке или предупреждений вы не увидите (чуть ниже более подробно). Вот еще один пример с сайта Browserhacks, на этот раз для IE11:

    Не буду вдаваться в детали и объяснять, почему код выше это хак (отчасти потому что я сам полностью не уверен, что правильно это понимаю), однако код выше работает только в IE11. На самом деле на сайте Browserhacks говорится «IE11 и выше», так что можно предположить, что он работает и в Edge. Но я этого не проверял. Важно не, для каких браузеров написан хак, а правильно ли мы понимаем, что это такое.

    Делают ли CSS-хаки код невалидным?

    Если у вас в коде есть хаки, возможно, вам будут выскакивать предупреждения и/или ошибки, если вы прогоните файл через W3C CSS validator. Данный сервис не скажет вам на 100%, есть ли в вашем коде хаки или нет.

    Бывают случаи, когда в CSS коде есть хаки, но ошибок и предупреждений нет. К примеру, если вы используете только *-html хак дляIE6, то ваш код спокойно пройдет валидациюю.

    Также некоторые хаки (как хак для IE11, о котором я говорил выше) используют вендорные префиксы (например, :-ms-fullscreen). В таком случае, если не изменять настройки в самом валидаторе, файл пройдет проверку, и сервис покажет сообщение:

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Но если прокрутить до самого экрана валидатора, там будет предупреждение:

    В данном случае меня предупреждают, что :-ms-fullscreen – «неизвестный псевдокласс с вендорным префиксом». Если вы считаете предупреждения такого рода ошибками, то в валидаторе можно открыть вкладку «More Options» и сделать так, чтобы данные предупреждения распознавались как ошибки:

    В разделе «Vendor Extensions» в выпадающем списке выберите «Errors», и тогда во время проверки ваш файл не пройдет валидацию, если в нем содержатся вендорные префиксы или любой другой код для определенных браузеров (необязательно хаки). С другой стороны, вы вполне спокойно можете написать так:

    Этот код работает в IE8 и ниже. Тут хак это обратный слеш и девятка (\9). В большинстве браузеров вообще вся строка будет проигнорирована из-за \9. Но по непонятным причинам в IE8 и ниже такая запись вполне себе нормально работает. В этом примере в независимости от настройки валидатора, выскочит ошибка, стили не пройдут валидацию:

    Какие методы нельзя назвать хаками?

    Методы и техники ниже необязательно могут быть CSS-хаками:

    !important – не хак


    CSS строка с !important на конце вообще не относится к этой теме. Это валидная CSS запись, которая не направлена на работу в каком-то конкретном браузере. Это не хак, но может расцениваться как плохой стиль в CSS.

    Вендорные префиксы не всегда являются хаками

    Вендорные префиксы нацелены на конкретные браузеры, но, обычно, их не называют хаками. В большей части случаев при использовании вендорных префиксов также пишется стандартизированный код. Это не хак. В отдельных случаях код с вендорными префиксами можно считать хаком. Примером может послужить код выше _:-ms-fullscreen. Еще пример это включение аппаратного ускорения в WebKit браузерах. Но все же по большей части вендорные префиксы это отдельный предмет. На сайте W3C есть документация к коду с вендорными префиксами, в которой поддерживается идея того, что такой код нельзя рассматривать как хак.

    Селекторы высокой специфичности – не хаки

    Если вы поднимаете специфичность селекторов, чтобы переписать какие-то стили, это нельзя назвать хаком (к примеру, body .content #sidebar p). Это плохой стиль CSS, но не хак.

    Старый синтаксис также не является хаком

    Хороший пример – сложный код Flexbox для поддержки старых браузеров. Помимо того, что на сегодняшний день такой код неактуален, я бы не стал называть это хаком. На тот момент, когда браузеры поддерживали старую запись селекторов, код был полностью валидным. Эффект от этого кода точно такой же, как от хака, но я не думаю, что это одно и то же.

    А являются ли условные комментарии хаком?

    Условные комментарии, с помощью которых можно писать CSS или даже HTML код под конкретные версии IE, занимают неопределенное положение. Написанный определенным образом HTML код полностью валидный, но все равно саму запись можно отнести к хакам.

    В 2008 году Paul Irish популяризировал то, что мы называем условными классами, которые, я уверен, многие из нас использовли. Условные классы задавались в условных комментариях и становились доступными только в определенных версиях IE, т.е. можно было использовать валидный CSS код в определенных версиях IE.

    Являются ли условные комментарии CSS-хаком? Я бы ответил да, даже просто потому, что они выполняют ту же задачу, что и обычные CSS-хаки.

    Стоит ли пользоваться CSS-хаками?

    Как и с другими вопросами в сфере веб-разработки, тут нельзя точно ответить. Правильнее будет сказать в зависимости от случая. Сторонники чистоты кода будут говорить, что хаки лучше не использовать. Но зачастую все не так просто. Я советую:

    Прилагайте максимальные усилия к написанию валидного, стандартизированного и кроссбраузерного CSS кода без хаков в рамках бюджета и отведенного времени на проект.

    Если вы испробовали все возможные варианты, или вам не хватает времени или бюджета на правильное исправление кода, пользуйтесь хаками.

    При написании хаков пользуйтесь советами Harry Roberts, чтобы, когда у вас появится время или деньги вы могли с легкостью выкинуть или отрефакторить код.

    Всегда комментируйте хаки и рефакторьте код при первой возможности.

    В итоге

    Если из данной статьи вам ничего не запомнилось, тогда запомните всего одно предложение: CSS-хаки применяют код к одному или нескольким версиям браузера, другие браузеры игнорируются. Это простое определение CSS-хака. Если вы поддерживаете Microsoft Edge в CSS, это еще не значит, что для этого нужно писать хаки; поддержка это совершенно другая тема.

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

    Автор: Louis Lazaris

    Редакция: Команда webformyself.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Хаки для IE7

    Суть условных комментариев состоит в том, чтобы вместо слова condition подставить одно изо допустимых условий, приведу значения условий:

    IE Если это Internet Exlorer
    lt IE version Версия Internet Exlorer меньше значения version
    lte IE version Версия Internet Exlorer меньше или равная значению version
    IE version Версия Internet Exlorer равная значению version
    gte IE version Версия Internet Exlorer больше или равная значению version
    gt IE version Версия Internet Exlorer больше чем значение version, допустимые значения — 5, 5.5, 6 или 7

    К примеру, Вы можете написать:

    что будет означать — установить цвет фона всем элементам div как красный для браузеров Internet Explorer версий 7 и ниже. Или наоборот:

    Дополнительный пример условных комментариев для Internet Eplorer:

    Как настроить IE7 и IE8 на допустимый CSS?

    Я хочу настроить IE7 и IE8 на W3C-совместимый CSS. Иногда исправление CSS для одной версии не исправляется для другого. Как я могу достичь этого?

    Явно задавать версии IE без хаков с использованием HTML и CSS

    Используйте этот подход, если вам не нужны хаки в CSS. Добавьте уникальный для браузера класс в элемент , чтобы впоследствии можно было выбрать на основе браузера.

    Затем в вашем CSS вы можете очень строго обращаться к своему целевому браузеру.

    Для получения дополнительной информации просмотрите http://html5boilerplate.com/

    Целевые версии IE с CSS «Hacks»

    Более того, вот хаки, которые позволяют вам настраивать версии IE.

    Используйте «\ 9» для настройки IE8 и ниже.
    Используйте «*» для ориентации на IE7 и ниже.
    Используйте «_» для настройки IE6.

    Обновление: целевой IE10

    IE10 не распознает условные операторы, поэтому вы можете использовать это для применения класса «ie10» к элементу

    Илон Маск рекомендует:  Вырезанные уголки
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL