Css кроссбраузерная. Кроссбраузерная совместимость: адаптивный веб-дизайн для старых браузеров. Отладка условных комментариев
От автора:
CSS верстка – это, по сути, второй этап верстки сайта. И определенно очень важный, потому что в итоге именно он формирует внешний вид сайта. Сегодня хотелось бы еще раз подчеркнуть некоторые важные принципы работы с касакадными таблицами стилей.
Верстка с помощью css – что это и зачем оно нужно?
Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.
Свойств на самом деле не так уж и много, поэтому CSS можно назвать достаточно простой веб-технологией, которую можно без труда изучить. Другое дело, что технологии имеют особенность постоянно двигаться вперед, особенно технологии в области сайтостроения.
Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.
Поэтому всегда верстальщик в начале работы создает структуру, необходимые элементы, а потом все это оформляет.
Основные вещи, которые можно сделать в css
Табличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.
Соответственно, свойство display определяет, как тот или иной элемент будет отображаться на странице. Первое значение преобразует нужный элемент в таблицу, второе – в ряд таблицы, а третье – в отдельную ячейку. Вот так вот за счет таких нехитрых манипуляций вы можете смастерить искусственную таблицу на странице без единого тега table или td в коде.
Кроссбраузерная верстка. Как css может в этом помочь
А помочь он может очень просто – сбросьте все отступы и правила, которые браузеры могут добавлять по умолчанию, и вы уже добьетесь определенной кроссбраузерности. По крайней мере, веб-обозреватели будут работать по вашим правилам, а не вы по ихним. Этот подход еще называют как css reset. То есть создается набор стилей, который сбрасывает настройки по умолчанию.
В сети есть много различных вариантов css reset, так как каждый веб-разработчик любит делать по-своему. В самом примитивном варианте сброс стилей можно сделать так:
|
| padding
:
0
;
margin
:
0
;
ul
{
list
-
style
:
none
;
|
То есть мы просто убрали все внутренние и внешние отступы и всех элементов, а также убрали маркеры у списков, потому что сегодня мало кто использует их. Цель css reset – позволить вам начать описание стилей с чистого листа.
Рис.1. Каждому из этих товарищей нужно угодить, иначе можно потерять потенциальных посетителей сайта.
Адаптивная верстка в css
Адаптивная верстка это вообще отдельная ветвь в сайтостроении, но в этой статье я всего лишь объясню вам, что это такое с простейшим примером. Вообще я думаю, что названа она очень правильно. Адаптироваться, значит, меняться. А в сайтостроении в основном нужно меняться под разные разрешения экрана. Сайту меняться, всмысле, не человеку же.
Вообще адаптивность сегодня чуть ли не обязательный параметр нормального сайта. Суть ее в том, что дизайн сайта и его структура немного меняются на разных разрешениях экрана. На смартфонах и планшетах, например, пропадает боковая колонка, а на больших экранах макет перестает увеличиваться и центрируется.
Адаптивность реализуется с помощью так называемых медиа-запросов. Обычно их пишут прямо в главном файле стилей. Простейший пример медиа-запроса:
@media and only screen (max-width: 600px){
img{
float: none;
}
}
|
| @
media
and
only
screen
(max
-
width
:
600px
)
{
img
{
float
:
none
;
|
Что происходит? Этим запросом мы указали браузеру, что если ширина экрана будет меньше 600 пикселей, то нужно отменить обтекание текста изображениями. Зачем? Ну хотя бы потому, что изображение и текст в одной строке, шириной всего 600 пикселей, будут смотреться очень плохо.
Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!
Рис.2. Пример записи медиа-запросов. Как видите, для одного шаблона может понадобиться приличное количество правил и стилей, чтобы реализовать нормальную адаптивность.
Какой редактор использовать для работы с css?
Конечно, программа для css верстки должна быть более менее толковой – с поддержкой подсветки синтаксиса как минимум, потому что это очень важно для визуального восприятия кода.
Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.
Узнайте css лучше
Кроссбраузерность, адаптивность, работа с таблицами и многое другое – все это можно очень долго рассматривать отдельно, потому что css предоставляет нам все необходимое для реализации отличного внешнего вида у сайта.
Подробнее о том, как использовать эту технологию при верстке под мобильные устройства, вы можете узнать из . Также в нашем премиум разделе вы можете найти обучающие уроки по основам этой технологии, а также более продвинутый материал по CSS3, поэтому вам не нужно ничего искать, все уже есть, только бери и учись.
Невозможно в столь короткой статье рассказать вам подробно обо всем, что дает верстка с помощью технологии css, но кое-какие моменты, я думаю, вы уловили. Для создания сайта этого просто необходимый язык, без которого нельзя обойтись, а в его изучении вам помогут материалы на нашем сайте, среди которых много и бесплатных. Также я рекомендую вам подписаться на обновления, чтобы было проще получать от нас новые уроки.
Все пользователи сети интернет для просмотра страниц интернет сайтов используют специальные программы – браузеры. Браузер это программа, которая осуществляет связь пользователя с сервером. Браузер посылает запросы к серверу и получает ответы от него, и этот ответ преобразует в тот вид, который все привыкли называть интернет страницей со всем ее содержимым, текстом, изображениями, видео и т.д. Готовый вид страницы (расположение контента, размеры, цвет, шрифт и пр.) задается с помощью HTML верстки и каскадных таблиц стилей (CSS), которые были преобразованы из изображения нарисованным дизайнером, в вид понятный браузеру. Это и называется версткой. Простыми словами HTML верстка это расположение элементов интернет страницы, там, где они должны располагаться по замыслу дизайнера, который создавал макет будущей страницы.
Но каждый пользователь отдает предпочтение более привычному для себя браузеру. В наше время существует 5 самых популярных браузеров, о которых говорит статистика. Это Chrome, Safari, Opera, FireFox и Internet Explorer (IE). Эти браузеры той или иной версии чаще всего используют пользователи сети интернет, для просмотра «мировой паутины». Каждый из этих браузеров имеет свою функциональность и свои особенности отображения интернет страниц.
В большом разнообразии всех браузеров и их версий, и их особенностях отображения интернет страниц, появилось понятие коссбраузерность HTML верстки. Так что же такое кроссбраузерность?!
Кроссбраузерность
– это свойство интернет страниц отображаться в разных версиях браузеров одинаково, без искажений и «расползания» элементов страницы, не зависимо от особенностей самого браузера.
Самым большим количеством этих особенностей обладают браузеры Internet Explorer от Microsoft, за что их и «не любят» большинство HTML верстальщиков, и придумывают для него разные способы приведения к правильному отображению страницы (данные способы верстальщики называют «костылями»). Лично наше мнение, что сверстать HTML страницу кроссбраузерной можно без применения этих самых «костылей», которые засоряют HTML код страницы.
Условные комментарии для Internet Explorer
Условный комментарий для всех версий IE
Условный комментарий для IE 7
Условный комментарий для IE 6
Условный комментарий для IE 5
Условный комментарий для IE 5.5
Условный комментарий для IE младше 6 версии
Условный комментарий для IE младше 7 версии
Условный комментарий для IE младше 8 версии
Условный комментарий для IE младше 9 версии
Условный комментарий для IE старше 6 версии
Условный комментарий для IE старше 7 версии
Условный комментарий для IE старше 8 версии
Основные правила кроссбраузерной верстки:
Не секрет, то, что каждый браузер имеет свои стили оформления тех или иных элементов HTML кода, размер шрифта, размер отступов и т.д. что уже приведет к расползанию элементов страницы, и она не будет кроссбраузерной.
Отсюда можно сделать вывод, что все собственные стили разных браузеров нужно «отключить», точнее сбросить на одинаковые. Некоторые HTML верстальщики делают это непосредственно при задании CSS стилей к отдельным элементам, мы же используем другую практику. Мы сбрасываем все CSS стили браузеров в самом начале CSS документа. Для этого мы используем доработанный набор стилей CSS предложенный meyerweb.com
Сброс CSS стилей (Reset CSS)
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight:100;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration:none
}
Данный код, добавленный в стили CSS, сбрасывает все собственные стили браузеров на одинаковый. Это позволит сделать верстку HTML страницы идентичной во всех браузерах, не зависимо от их собственных стилей.
Валидность HTML документа
Второе правило кроссбраузерной HTML верстки это соблюдение стандартов HTML и XHTML, утвержденных W3C консорциумом. Каждый HTML документ (именно документ), имеет свой стандарт, и свои особенности написания.
Виды стандартов HTML документов и их отличия мы рассмотрим позже, так как эта тема требует отдельного рассмотрения и описания.
Валидность
HTML документа это соответствие утверждённым стандартам и нормам W3C консорциума.
По стандартам W3C каждый тег HTML документа должен иметь свою пару. Называются эти пары, открывающимся и закрывающимися тегами, но есть исключения из этого правила – это теги 
,
и т.д., эти теги не имеют закрывающейся пары.
Не закрытый парный тег, каждый браузер может понять по своему, и отобразит содержимое, заключенное в эти теги не так как надо верстальщику.
Проверить валидность HTML документа можно на сайте W3C консорциума .
Пример валидного кода:
Валидный код
Валидный код HTML
Данный HTML код соответствует стандартам XHTML 1.0 Strict и является валидным
И содержит в себе как парные (закрывающиеся) теги, так и не парный тег
Пример не валидного кода:
Не валидный код
<body>
<h1>Не валидный код HTML
<p></h1>
Данный HTML код не соответствует стандартам W3C и не является валидным <br />
</p>
</body>
</html>
<h2>Проверяем кроссбраузерность.</h2> <p>Существует много способов проверить кроссбраузерность верстаемого HTML документа, самый простой из них – это поставить все популярные браузеры себе на компьютер. Но как быть с разными версиями Internet Explorer?! — спросят многие.</p> <p>Есть простой способ собрать все версии IE так сказать в одном флаконе. Вы можете скачать программу IE Tester , которая включает в себя все версии IE, начиная с IE 5.5.</p> <p>Так же Вы можете воспользоваться сервисом Browsershots.org , который позволяет сделать снимки Вашего HTML документа более чем с 40 разных браузеров.</p>
<p><i>Под кроссбраузерностью обычно понимают способность сайта выглядеть во всех браузерах одинаково
(или одинаково хорошо).
</i></p>
<p><i>Для того, чтобы сайт выглядел максимально одинаково во всех браузерах
(современных + поддержка некоторых устаревших) необходимо знать различные приемы и особенности браузеров.
Их изучением мы сейчас и займемся.
</i></p>
<h2>Блок . Современные браузеры</h2>
<p>В настоящее время популярными являются следующие браузеры:
<b>Internet Explorer
</b> (сокращенно IE, браузер от компании Microsoft, встроен в Windows),
<b>Opera
</b> (норвежский браузер), <b>Mozilla
</b> (она же Firefox),
<b>Google Chrome
</b> (браузер от компании Google), <b>Safari
</b> (браузер от Apple).
Браузеры в мобильных устройствах: Android, IOS.</p>
<h2>Блок . Движки браузеров</h2>
<p>Кроме браузеров существует такое понятие,
как <i>движок
</i> браузера.
Движок - это основа браузера, которая преобразует HTML и CSS в видимую на экране картинку.
Движков существует намного меньше, чем браузеров и, как следствие,
многие браузеры имеют одинаковые движки и поэтому одинаковые особенности и баги
(проблемы).</p>
<p>Виды движков:
<b>Gecko
</b> (Mozilla/Firefox).
<b>Webkit
</b> (Safari, Google Chrome, Opera 14+, Android, IOS).
<b>Presto
</b> (Opera до 14 версии).
<b>Trident
</b> (Internet Explorer).</p>
<p>Обратите внимание на то, что Opera,
начиная с 14 версии, перешла на движок <b>Webkit
</b>.</p>
<p>В настоящее время <b>Webkit
</b> распался на два
движка <b>Blink
</b> от Google Chrome и Opera 14+
и движок от Safari. Эти два движка по-прежнему поддерживают
префикс <b>-webkit
</b>, однако, их разделение
уже можно наблюдать на некоторых CSS свойствах,
например, hyphens</p>
<p>Браузера Internet Explorer официально больше не существует,
последняя его версия 11-тая. Однако, фактически,
этот браузер сменил название (но не движок) и теперь
называется <b>Edge
</b>.</p>
<h2>Блок . Вендорные префиксы</h2>
<p>В настоящее время среди браузеров сложилась следующая ситуация: до того, как свойство CSS появится в спецификации,
браузеры могут реализовывать пробную версию этого свойства со специальной приставкой, которая называется
<i>вендорным префиксом
</i> (от слова vendors – разработчики, префикс разработчиков).</p>
<p>Как это выглядит, давайте посмотрим
на примере свойства box-sizing (смена блоковой модели).</p>
<p>P {
box-sizing: border-box;
}</p>
<p>Это свойство начало поддерживаться только с Firefox 29, однако уже с версии Firefox 2
оно было доступно с префиксом <b>-moz
</b>:</p>
<p>P {
-moz-box-sizing: border-box;
}</p>
<p>Остальные браузеры имеют аналогичные приставки:
<b>-moz
</b> - Mozilla/Firefox (движок Gecko),
<b>-webkit
</b> – браузеры на движке Webkit (Google Chrome, Safari, Opera 14+, Android, IOS),
<b>-o
</b> – Opera до 13 версии включительно (движок Presto),
<b>-ms
</b> – IE с версии 8+.</p>
<p>Таким образом, наиболее кроссбраузерный вариант свойства <b>box-sizing
</b>,
с использованием вендорных префиксов, будет иметь следующий вид
(с префиксом -ms его писать не нужно, IE сразу перешел на поддержку этого свойства):</p>
<p>P {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}</p>
<p>В CSS многие свойства имеют аналогичную реализацию: с префиксом и без него.</p>
<p>Обратите также внимание на то, что Opera с версии 14 перешла на Webkit и теперь для нее будет
использоваться префикс <b>-webkit
</b>,
а префикс <b>-o
</b> останется только для старых версий (до 14-той).</p>
<p>Есть следующее правило: <i>свойства с префиксами пишутся до
свойства без префикса
</i>. Это сделано затем, чтобы основное свойство
затирало свойства с префиксами, так как браузер может поддерживать
свойство как с префиксом, так и без него. А свойство с префиксом может
работать с какими-либо проблемами.</p>
<p>В настоящее время некоторые браузеры решили отказаться от префиксов
в связи с их неудобностью.
И сейчас вместо них используют так называемые <i>флаги
</i>.
Свойства теперь внедряются в браузер, но по умолчанию отключены,
однако их можно включить в настройках браузера, поставив соответствующий флажок
в настройках. В настоящее время браузеры <b>Google Chrome
</b> и
<b>Opera
</b> для новых свойств поддерживают именно эту модель.</p>
<h2>Блок . Где посмотреть какие префиксы писать</h2>
<p>Рекомендую специальный сервис caniuse.com ,
на котором можно посмотреть какие свойства уже можно использовать
и нужно ли для них писать префиксы или нет.</p>
<h2>Блок . Статистика по браузерам</h2>
<p>Для того, чтобы знать, какой браузер следует поддерживать в настоящее время,
а на поддержку какого следует забить, необходимо отслеживать статистику по браузерам в регионе сайта.
Сделать это можно с помощью следующего сервиса:
gs.statcounter.com - все браузеры с версиями по странам (english).</p>
<h2>Блок . Как проверить сайт в разных браузерах</h2>
<p>После создания сайта его необходимо потестировать во всех популярных браузерах.
Однако сделать это не так просто как кажется - мало того, что браузеры отличаются от версии к версии,
так еще существуют различия между одной версией браузера в Windows и, к примеру, Linux.
Понятно, что иметь такое количество браузеров просто невозможно.</p>
<p>На помощь приходят специальные сервисы,
которые делают скриншоты сайта в различных версиях сайта.</p>
<h2>Блок . Нормализация стилей</h2>
<p>Кроме сбросов, существует так называемая <i>нормализация
</i> -
это когда значения свойств (например, margin и padding) не сбрасываются в ноль, а им указываются
определенные удобные значения (чтобы во всех браузерах отступы по умолчанию были одинаковыми
и удобными).</p>
<ol><li>Помните о том, что сброс стилей необходимо делать до подключения ваших стилей, а не после!</li>
<li>CSS Reset следует вынести в отдельный файл (обычно его называют reset.css).
В таком случае вы можете использовать его в различных проектах,
не прилагая при этом никаких усилий по его отделению от других правил CSS.</li>
<li>Не бойтесь модифицировать сам reset.css. Подстройте его под себя, заставьте его работать на себя.
Изменяйте, перестраивайте, убирайте и добавляйте так, как это нужно в вашем конкретном случае.</li>
<li>Имеет смысл добавить стили по умолчанию для h1-h6 (например, размер шрифта),
для td (сделать text-align: center) и т.д.</li>
</ol><h2>Что вам делать дальше:</h2>
<p>Приступайте к решению задач по следующей ссылке: задачи к уроку .</p>
<p>Когда все решите - переходите к изучению новой темы.</p>
<br>
Когда CSS используется не только для оформления текста, но и для работы со слоями при бестабличной верстке, необходимо помнить, чт осовременные браузеры не одинаково трактуют такие важные параметры как margin — внешний отсутп элемента, padding — внутренний отступ элемента, а также параметры position — положение, float — обтекание текстом и ряд других.<p>Из-за этих различий в трактовке значений параметров, часто случается, что сайты и веб-интерфейсы, которые нормально смотрятся в браузерах Mozilla Firefox, Opera и Safari, вдруг начинают разъезжаться в браузере Internet Explorer.</p><p>В основе этих различий в интерпретации браузерами CSS лежит неполное соотвествие браузеров Internet Explorer до версии 7 стандартам CSS, принятым W3C. Поэтому для успешной бестабличной верстки для более ранних версий IE, чем 7, требуется использовать ряд специальных конструкций, называемых <b>CSS хаки
</b>. Важно также отметить, что и для других браузеров иногда случается необходимость использовать CSS хак.</p><p>Рассмотрим возможное написание CSS, которое было бы интерпретировано только отдельными видами браузеров:</p><p>
<b> Оглавление документа
</b> </p><h2>CSS для IE 5, 5.5, 6, 7</h2>
<h3>Условные комментарии</h3>
Браузеры IE давно поддерживают так называемые условные комментарии (Conditional Comments), которые позволяют делать контент видимым только для IE. Условные комментарии – это просто специальным образом сформированные HTML комментарии, которые понимают только определенные версии Internet Explorer’a для Windows. Для примера вы можете использовать условные комментарии для исправления бага прозрачности PNG в IE.<p>Для их использования нужно:</p><ol><li>Сначала создать общую таблицу стилей для всех браузеров, без каких-либо хаков, чтобы потом продолжить работу по исправлению ошибок при отображении страницы в IE.</li><li>Потом таблица стилей с исправленными ошибками сохраняется отельно и становится таблицей стилей для всех версий IE (например, all-ie.css).</li><li>Сохраните отдельно таблицы стилей с исправлениями ошибок отдельно для каждой версии IE (например, ie-5.0.css).</li><li>Далее необходимо последовательно подключить эти таблицы стилей через HTML-код с помощью условных комментариев.</li>
</ol><h4>Синтаксис условных комментариев</h4>
Приведенный условный комментарий будет понят браузерами IE5, IE5.5 и IE6, а также IE7 и IE8:<p><!-->
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<!-->
</p><h4>Применение CSS для IE5</h4>
Если вам необходимо применить условный комментарий только для IE5, то необходимо просто указать версию 5.0 в условии if IE 5.0:<p><!-->
<link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<!-->
</p><h4>Применение CSS для IE5.5</h4>
Если необходимо применить относительно IE5.5, то это будет выглядеть так:<p><!-->
<link rel="stylesheet" type="text/css" href="ie-5.5.css" />
<!-->
</p><h4>Применение CSS для IE6</h4>
То же самое для IE6:<p><!-->
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<!-->
</p><h4>Применение CSS для IE5 и IE5.5 одновременно или для нескольких версий</h4>
Если требуется, используя условные комментарии, исправить баг с боксовой моделью в браузерах IE5 и IE5.5, то можно использовать часть индекса версии или операторы сравнения.<p>Первый пример подключит таблицу стилей к любой версии Internet Explorer’а первая цифра которой 5:</p><p><!-->
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<!-->
</p><p>В качестве альтернативы, можно указать, чтобы таблицы стилей подключались к любой версии браузера, номер которой меньше 6-ти:</p><p><!-->
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<!-->
</p><p>Вместо <b>lt
</b> (<b>l
</b>ess <b>t
</b>hen — меньше) можно также использовать <b>lte
</b> (<b>l
</b>ess <b>t
</b>hen or <b>e
</b>qual to — меньше или равен), <b>gt
</b> (<b>g
</b>reater <b>t
</b>hen — больше), <b>gte
</b> (<b>g
</b>reater <b>t
</b>hen or <b>e
</b>qual to — больше или равен) главное при всем этом многообразии возможностей правильно выбрать порядок указания условных комментариев, чтобы не попасть в ситуацию, когда для некоторых браузеров группы условных комментариев пересекаются, давая неожиданный результат. </p><h4>Порядок использования</h4>
Если не требуется, чтобы общие таблицы стилей доминировали над таблицами, которые созданы специально для IE, то нужно подключать сначала общие таблицы, а уже потом таблицы для IE. На примере это выглядит так:<p><link
rel=
"stylesheet"
type=
"text/css"
href=
"common.css"
/>
<span><!-->
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<!-->
</span>
<span><!-->
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<!-->
</span>
<span><!-->
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<!-->
</p><h4>Другие достоинства этого метода</h4>
Используя условные комментарии, вы также получаете способ для более достоверного определения версии браузера. Браузеры, которые выдают себя за Internet Explorer, но на самом деле ими не являются, не будут использовать таблицы стилей предназначенные для IE. С помощью этого метода вы можете составить точную статистику относительно того, какую версию IE используют посетители, без ошибок, вызванных программами и браузерами выдающими себя за IE.<h4>Валидность</h4>
Возможно, одной из самых приятных частей этой техники является то, что ваши таблицы стилей и ваши тщательно оформленные (X)HTML документы сохранят полное соответствие спецификации.<h4>Отладка условных комментариев</h4>
Существует одно предупреждение, о котором стоит упомянуть.<p>Если вы используете несколько версий Internet Explorer’а на одной машине, то все эти версии будут выдавать себя за самую новую из установленных версий. Это означает, что если вас установлен IE6, но вы просматриваете страницу с помощью IE5, выполниться этот условный комментарий:</p><p><!-->
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<!-->
</p><p>А этот условный комментарий не выполниться:</p><p><!-->
<link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<!-->
</p><p>Для наиболее точного отслеживания различий в обработке CSS разными версиями IE хорошо себя зарекомендовала бесплатная программа IETester , которая поддерживает все версии IE от 5 до 8. А для быстрого изменения праметров CSS в IE8 по нажатию F12 доступно средство разработчика, напоминающее FireBug в Mozilla Firefox.</p><p>Аналогично объявлению таблиц стилей, этим способом можно скрывать HTML код от определенной или всех версий IE. Например, надпись «HTML-код» будет отображаться во всех браузерах кроме IE6, если поместить её в условный комментарий следующим образом: </p><p><!-->
<p>HTML-код</p>
<!-->
</p><h4>Тег <comment></h4>
Следует помнить, что условные комментарии в IE можно использовать везде на странице, а не только для объявления таблиц стилей для соответствующей версии браузера. С помощью условных комментариев можно выводить пользователям IE какую-то дополнительную информацию, которая не видна пользователям других браузеров.<p>Аналогично условным комментариям в IE 5--IE 8 поддерживается тег <comment>...</comment> . Этот тег позволяет скрыть информацию от пользователей IE, таким образом код:</p><p>Это <comment>не</comment> браузер Internet Explorer </p><p>Пользователям IE будет показан как: Это браузер Internet Explorer , а пользователям других браузеров — Это не браузер Internet Explorer .</p><p>Тег <comment> не валиден.</p><h3>CSS хаки IE</h3>
Чтобы не загромождать HTML-код объявлением нескольких таблиц стилей или, если требуется сохранить единственный CSS-файл можно написать отдельные стили, которые будут работать только в IE. Причем, есть вариант как для IE6, так и для IE7. <p>
<b>Для IE всех версий.
</b> Если поставить перед свойством две наклонные черты (//), оно будет восприниматься лишь браузерами IE всех версий. Другие браузеры такое свойство проигнорируют.</p><p>
<b>Для IE6
</b> существует возможность поставить минус (-) или нижнее подчеркивание (_) перед свойством, при этом IE7 не отреагирует на него. Можно также использовать конструкцию: </p><p>* html .style <span>{
...}
</p><p>Например:</p><p>Style <span>{
background
:
red; <span>/* для нормальных браузеров */
</span>
//background
:
green; /* для всех IE */
-background
:
blue; /* для IE6 */
}
* html .style {
background
:
blue; <span>/* другой способ для IE6 */
</span>
}
</p><p>В этом случае фон будет красным в браузерах Opera и Firefox, зеленым в IE7 и синим - в Internet Explorer 6.</p><p>В примере меняется цвет фона для разных браузеров. На практике же этот метод используется для того, чтобы добиться идентичности отображения и кроссбраузерности. Чаще всего приходится прибегать к нему при позиционировании и задавать разные значения свойств типа left, top, padding, margin, width и других, связанных с размерами, процентами и пикселами.</p><p>
<b>Для IE7
</b> используется CSS хак: </p><p>*<span>:
first-child+html .style {
...}
</p><p>*+html .style <span>{
...}
</p><h2>CSS для Firefox</h2>
Также существуют специальные CSS хаки, позволяющие показывать стили только браузеру Firefox. <p>html<span>:
root .style {
...}
<span>/* этот работает ещё и для Safari */
</p><p>Style, x<span>:
-moz-any-link {
...}
</p> <p>Для быстрого изменения праметров CSS в Firefox по нажатию F12 доступно (требует предварительной установки) средство разработчика Firebug — является лучшим среди аналогов.</p><h2>CSS для Opera</h2>
CSS хаки для браузера Opera представлены следующими примерами:
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</article>
</div>
<div class="cont_banner">
<div>
</div>
<div>
</div>
</div>
<div class="cont_figSmall">
<p>Последние материалы раздела:</p>
<section>
<figure style='vertical-align:top;'>
<a href="/css-krossbrauzernaya-krossbrauzernaya-sovmestimost-adaptivnyi/"><img src="https://i2.wp.com/webformyself.com/wp-content/uploads/2016/98/1.jpg" style="width:80px" alt="Кроссбраузерная совместимость: адаптивный веб-дизайн для старых браузеров" loading=lazy></a>
<figcaption>
<a class="anonstitle" href="/css-krossbrauzernaya-krossbrauzernaya-sovmestimost-adaptivnyi/">Кроссбраузерная совместимость: адаптивный веб-дизайн для старых браузеров</a>
<p class='fig_article'>От автора:
CSS верстка – это, по сути, второй этап верстки сайта. И определенно очень важный, потому что в итоге именно он формирует внешний вид...</p>
</figcaption>
</figure>
<figure style='vertical-align:top;'>
<a href="/javascript---massivy-massivy-v-javascript-zapolnenie-massiva-s-pomoshchyu/"><img src="https://i0.wp.com/romanchueshov.ru/wp-content/uploads/2016/08/arrays.jpg" style="width:80px" alt="Массивы в javascript Заполнение массива с помощью цикла" loading=lazy></a>
<figcaption>
<a class="anonstitle" href="/javascript---massivy-massivy-v-javascript-zapolnenie-massiva-s-pomoshchyu/">Массивы в javascript Заполнение массива с помощью цикла</a>
<p class='fig_article'>МассивыМассив
- это упорядоченная коллекция значений. Значения в массиве называются элементами, и каждый элемент характеризуется числовой позицией...</p>
</figcaption>
</figure>
<figure style='vertical-align:top;'>
<a href="/kak-ubrat-lishnie-znachki-s-ekrana-kompyutera-kak-udalit-yarlyki-udalennyh/"><img src="https://i0.wp.com/grand-screen.com/blog/wp-content/uploads/2016/05/yarlyk3.jpg" style="width:80px" alt="Как удалить ярлыки удаленных приложений на андроид" loading=lazy></a>
<figcaption>
<a class="anonstitle" href="/kak-ubrat-lishnie-znachki-s-ekrana-kompyutera-kak-udalit-yarlyki-udalennyh/">Как удалить ярлыки удаленных приложений на андроид</a>
<p class='fig_article'>Зачастую, при загрузке приложений на Андроид, на рабочем столе автоматически сохраняются и ярлыки скачиваемых программ. Впоследствии, удаляя за...</p>
</figcaption>
</figure>
</section>
</div>
<dblock></dblock>
<dblock></dblock>
</div>
<aside>
<div>
<div class="accordion">
<ul>
<li><a href="/">Рубрики</a>
<ul class='menu2' style="display:block;padding-top:15px;">
<li><a href="/category/windows/">Windows</a></li>
<li><a href="/category/programs/">Программы</a></li>
<li><a href="/category/computers/">Компьютеры</a></li>
<li><a href="/category/safety/">Безопасность</a></li>
<li><a href="/category/notebooks/">Ноутбуки</a></li>
<li><a href="/category/internet/">Интернет</a></li>
<li><a href="/category/basics/">Азы</a></li>
<li><a href="/category/errors/">Ошибки</a></li>
</ul>
</li>
</ul>
</div>
<dblock></dblock>
<div class="box" style="margin-left:5px">
<br>
<div align='center'>
</div>
<span id="place"></span>
</div>
</div>
</aside>
</main>
<footer>
<div class="foot_logo">
<a href="/"><img src="/img/logo.svg?1" alt="logo" loading=lazy></a>
</div>
<div class="foot_info">
<p>© Интернет. Ошибки. Безопасность. Программы. Компьютеры <span>VEZAKS.RU</span>, 2024</p>
<p>Все статьи, расположенные на сайте, несут лишь ознакомительный характер. </p>
<dblock></dblock>
</div>
<div class="foot_ico">
</div>
<SCRIPT language="Javascript">
var delta = 0;
$(document).ready(function() {
$(window).scroll(function() {
var ScrollTo = $('#place').offset().top;
if ($(window).scrollTop() > ScrollTo) {
$('#float-box').animate({
'top': delta + 'px'
}, 500);
} else
$('#float-box').stop(true).animate({
'top': '5600px'
}, 100);
});
$('#float-box .close').bind('click', function() {
$(this).parent().remove();
});
});
</script>
</footer>
</div>
<div class="overlay"></div>
</body>
</html>
