17 CSS + HTML альтернатив кроссбраузерной верстки


Содержание

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 также доступно средство разработчика. Для его открытия надо перейти в меню «Инструменты» — > «Дополнительно» — > «Средства разработки».

Кроссбраузерная верстка

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

Что такое кроссбраузерная верстка

Причем под корректностью понимается именно точное расположение всех деталей макета и функционала. Сайт должен смотреться одинаково во всех популярных браузерах:

  • Firefox
  • Chrome
  • Opera
  • Opera mini
  • Safari
  • Internet Explorer

Задача достаточно сложная, если использовать «специфичные» возможности CSS, так как все браузеры отображают некоторые элементы веб-страниц по-своему. И каждая новая версия включает в себя новые возможности, реализуемые в браузерах от других разработчиков далеко не в один и тот же день.

Кроссбраузерная верстка хорошо знакома тем, кто работал с браузером Internet Explorer 6 – он подпортил немало нервов верстальщикам за счет своей уникальности. А уникальность эта выражалась в том, что этот браузер не поддерживает очень многие правила и стандарты. В результате выходило так, что сверстанный макет смотрелся в Firefox и Opera просто великолепно, разваливаясь в IE6 в абсолютную кашу.

Илон Маск рекомендует:  Что такое код odbc_primarykeys

Причины нарушения корректного отображения страниц

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

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

Что нужно для кроссбраузерной верстки – инструменты

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

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

  • Общие знания о верстке;
  • Знания в области особенностей верстки под те или иные браузеры;
  • Несколько браузеров на одном компьютере;
  • Проверка в сервисе browsershots.org

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

Отдельный фронт работ нужно провести с заказчиком. Ему нужно объяснить, что в мире web-дизайна нет ничего идеального, и что некоторыми моментами придется пожертвовать. Задачей команды дизайнеров и программистов становится создание сайта, который должен соответствовать следующим пунктам:

  • Максимальное соответствие исходному макету и пожеланиям заказчика;
  • Максимальное корректное отображение во всех популярных браузерах;


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

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

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

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 14. Блочная верстка сайта

Блочная верстка сайта

  • При работе со слоями или, иначе говоря, блоками и элементами div , основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
  • К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак — это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:

  1. Высота слоев div ограничена высотой контента:
  2. В случае, когда содержимое слоя превышает его установленную высоту, то браузеры по-разному ведут себя — одни увеличивают высоту слоя под новый контент, а другие, оставляя высоту первоначальной, накладывают контент поверх слоя.
  3. Фиксированный дизайн или
    жесткая блочная верстка (две колонки)

    • Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
    • Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
    • Основной блок с контентом размещается по центру, тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

    Рис.1. Пример фиксированного дизайна

    • «Разбиваем» все основные элементы страницы на блоки следующим образом:
      • блок 1 — слой первый ( ),
      • блок 2 и 3 заключаются в единый блок ( ),
      • блок 2 — слой с меню ( ),
      • блок 3 — слой с контентом ( ),
      • блок 4 — слой с .

    Схематично изобразим расположение блоков:

    10 лучших CSS хаков для кроссбраузерности

    Табличная верстка Блочная верстка
    « Предыдущая запись
    “Как сделать буквицу на CSS” или “Всё, что нужно знать про псевдоэлемент first-letter в CSS”
    Следующая запись »
    Формы, часть 6, «Проверка данных формы на jQuery Validate»

    Вопросы кроссбраузерности будут ещё долго мучить умы веб-разработчиков, ровно до тех пор, пока не выпустит один браузер, которым будут пользоваться все без исключения (то есть — никогда — прим.ред.). Сейчас самым гагном является IE6, отчасти IE7, которые добавляют никого не обижающим верстальщикам кучу лишней работы.

    Предлагаю Вашему вниманию подборку 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, font, 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 <
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    >
    body < line-height: 1; >
    ol, ul < list-style: none; >
    blockquote, q < quotes: none; >
    blockquote:before, blockquote:after, q:before, q:after <
    content: »;
    content: none;
    >
    /* remember to define focus styles! */
    :focus < outline: 0; >
    /* remember to highlight inserts somehow! */
    ins < text-decoration: none; >
    del < text-decoration: line-through; >
    /* tables still need ‘cellspacing=»0″‘ in the markup */
    table <
    border-collapse: collapse;
    border-spacing: 0;
    >

    ага=) поэтому полным сбросом css я и не пользуюсь

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

    сбросовый css скинуть можно и в отдельный файл.. тогда не будет мусолить глаза…
    причем при верстке других сайтов можно просто копировать его и подгружать )


    ну да, обычно его отдельно и подрубают =)

    Скажите пожалуйста, а почему бы не делать так:

    Зачем перечислять все тэги? Объясните пожалуйста

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

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

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

    Например, если я сделаю так:
    * < list-style: none; >
    то для тэга img это свойство будет проигнорировано браузером.

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

    Символ * означает все тэги. Так вот меня всегда интересовало действительно ли “все” тэги или есть какие-то глюки в разных браузерах (например, какой-то тэг не реагирует на *)?

    Мне говорили, что в старых версиях FF не понимал, что такое * (правда меня интересуют лишь последние версии браузеров и хочу верстать кроссбраузерно только под новые версии)

    Например сделать так, чтобы кнопка кнопка не вдавливалась в браузере Opera так и не получилось

    Но частично решил эту проблему так:

    Правда нажимать на кнопку надо не более 1 раза в секунду. Если нажимать несколько раз в секунду, то всё-равно происходит вдавливание )))

    Александр, извините пожалуйста, за оффтоп. Но может Вы знаете, как можно сделать ссылку, вместо кнопки для отправки форм? Чтобы не использовать input или button (меня всегда злили эти элементы, так как не получалось сделать идеально кроссбраузерно)

    Есть что-то вроде $(“селектор”).submit(); но пока не хватило времени прочитать документацию.

    Блин все html тэги обрезались

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

    на тему вдавливания – о, дааа, тема бесячая.

    а отправить можно попробовать стандартным жабаскриптом
    отправить

    если через жкьюри, то надо задать ссылке идешник и, по идее, прописать нечто типа:

    но на тему работоспособности не ручаюсь, надо потестить

    CSS кроссбраузерность

    Здравствуйте дорогие читатели!

    Все мы желаем того, чтобы написанные нами стили корректно отображались в различных браузерах. Но как ни крути, придется дописывать стили, чтобы они работали в других браузерах. Этот процесс называется – приведение верстки сайта к кроссбраузерному виду. Кроссбраузерность — это когда css стили корректно отображаются в различных браузерах, и их различных версиях.

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

    1. Ориентируйтесь на самые популярные браузеры. В сети можно найти рейтинги браузеров. Также стоит учитывать регион аудитории сайта. Например, если это сайт для аудитории из Африки, то тут уже преобладает не Chrome, а другой браузер. Также в процессе верстки стоит посматривать, как выглядит сайт в тех браузерах, что занимают 2 и 3 место.

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

    3. Существуют специальные инструменты в сети для генерации кроссбраузерных стилей . Хочу выделить 2 самых интересных на мой взгляд.

    Инструменты для CSS кроссбраузерности.

    • Описано много стилей;
    • Есть пример использования с результатом.
    • Поначалу сложно ориентироваться на сайте;
    • Нельзя генерировать стиль со своими параметрами (дан свой пример использования).
    • Удобен и интуитивен в управлении;
    • Можно генерировать стили для своих параметров;
    • Можно посмотреть результат генерированного стиля.

    Как подключить кроссбраузерный шрифт читайте тут.


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

    Проблемы кроссбраузерности HTML и CSS

    Учебник HTML CSS

    Практика

    Продвинутый курс

    Практика

    Адаптив

    Продвинутые вещи

    Практика

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

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

    Блок . Современные браузеры

    В настоящее время популярными являются следующие браузеры: Internet Explorer (сокращенно IE, браузер от компании Microsoft, встроен в Windows), Opera (норвежский браузер), Mozilla (она же Firefox), Google Chrome (браузер от компании Google), Safari (браузер от Apple). Браузеры в мобильных устройствах: Android, IOS.

    Блок . Движки браузеров

    Кроме браузеров существует такое понятие, как движок браузера. Движок — это основа браузера, которая преобразует HTML и CSS в видимую на экране картинку. Движков существует намного меньше, чем браузеров и, как следствие, многие браузеры имеют одинаковые движки и поэтому одинаковые особенности и баги (проблемы).

    Виды движков: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera до 14 версии). Trident (Internet Explorer).

    Обратите внимание на то, что Opera, начиная с 14 версии, перешла на движок Webkit.

    В настоящее время Webkit распался на два движка Blink от Google Chrome и Opera 14+ и движок от Safari. Эти два движка по-прежнему поддерживают префикс -webkit, однако, их разделение уже можно наблюдать на некоторых CSS свойствах, например, hyphens

    Браузера Internet Explorer официально больше не существует, последняя его версия 11-тая. Однако, фактически, этот браузер сменил название (но не движок) и теперь называется Edge.

    Блок . Вендорные префиксы

    В настоящее время среди браузеров сложилась следующая ситуация: до того, как свойство CSS появится в спецификации, браузеры могут реализовывать пробную версию этого свойства со специальной приставкой, которая называется вендорным префиксом (от слова vendors – разработчики, префикс разработчиков).

    Как это выглядит, давайте посмотрим на примере свойства box-sizing (смена блоковой модели).

    Это свойство начало поддерживаться только с Firefox 29, однако уже с версии Firefox 2 оно было доступно с префиксом -moz:

    Остальные браузеры имеют аналогичные приставки: -moz — Mozilla/Firefox (движок Gecko), -webkit – браузеры на движке Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o – Opera до 13 версии включительно (движок Presto), -ms – IE с версии 8+.

    Таким образом, наиболее кроссбраузерный вариант свойства box-sizing, с использованием вендорных префиксов, будет иметь следующий вид (с префиксом -ms его писать не нужно, IE сразу перешел на поддержку этого свойства):

    В CSS многие свойства имеют аналогичную реализацию: с префиксом и без него.

    Обратите также внимание на то, что Opera с версии 14 перешла на Webkit и теперь для нее будет использоваться префикс -webkit, а префикс -o останется только для старых версий (до 14-той).

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

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

    Блок . Где посмотреть какие префиксы писать

    Рекомендую специальный сервис caniuse.com, на котором можно посмотреть какие свойства уже можно использовать и нужно ли для них писать префиксы или нет.

    Блок . Статистика по браузерам

    Для того, чтобы знать, какой браузер следует поддерживать в настоящее время, а на поддержку какого следует забить, необходимо отслеживать статистику по браузерам в регионе сайта. Сделать это можно с помощью следующего сервиса: gs.statcounter.com — все браузеры с версиями по странам (english).

    Блок . Как проверить сайт в разных браузерах

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

    На помощь приходят специальные сервисы, которые делают скриншоты сайта в различных версиях сайта.

    Например, сервис browsershots.org- это веб-сервис, который делает скриншоты вашего сайта в разных операционных системах и браузерах. Это удобный, хоть и довольно медленный способ проверить свой сайт сразу во многих браузерах. Когда вы вводите адрес вашего сайта в строку для проверки, он ставится в очередь на тестирование. После этого скриншоты будут появляться на итоговой странице по очереди. Это может занять от 5 минут до 2 часов.


    Существуют и другие подобные сервисы (гуглите).

    Блок . Сброс стилей

    По умолчанию браузеры добавляют отступы различным элементам: заголовкам h1-h6, абзацам p, спискам ol и ul и т.д.

    Разные браузеры добавляют эти отступы по-разному, поэтому на стандартное поведение браузеров полагаться не стоит и следует создать так называемый файл сброса стилей reset.css.

    Что должно входить в этот файл?

    CSS Reset впервые был применен в 2004 году Эндрю Креспанисом (Andrew Krespanis). В своей статье он советовал использовать универсальный селектор (*) в начале CSS-файла, чтобы задать всем элементам нулевые отступы (margin и padding):

    Такой подход имеет ряд преимуществ и недостатков.

    1. Простота.
    2. Небольшое количество кода CSS.
    1. Не охватывает все свойства, которые нужно сбросить.
    2. В Mozilla для select появляется небольшой баг.
    3. Не сбрасывает padding для input.
    4. В некоторых браузерах оформление кнопок по умолчанию теряет свой вид (выглядят как текст с рамкой вокруг, например в Opera).
    5. Несколько замедляет рендеринг (отображение) страницы в Mozilla (актуально для крупных файлов css в тысячи строк кода. В других случаях эта задержка незаметна, исчисляется в микросекундах).

    Более продвинутый подход — использование сброса стилей всех необходимых элементов (установка нужных значений) без использования универсального селектора. Одним из популярных сбросов стилей такого типа является сброс от Эрика Мейера (Eric Meyer), смотрите его тут: сброс стилей от Эрика Мейера.

    Блок . Нормализация стилей

    Кроме сбросов, существует так называемая нормализация — это когда значения свойств (например, margin и padding) не сбрасываются в ноль, а им указываются определенные удобные значения (чтобы во всех браузерах отступы по умолчанию были одинаковыми и удобными).

    Советы и рекомендации

    1. Помните о том, что сброс стилей необходимо делать до подключения ваших стилей, а не после!
    2. CSS Reset следует вынести в отдельный файл (обычно его называют reset.css). В таком случае вы можете использовать его в различных проектах, не прилагая при этом никаких усилий по его отделению от других правил CSS.
    3. Не бойтесь модифицировать сам reset.css. Подстройте его под себя, заставьте его работать на себя. Изменяйте, перестраивайте, убирайте и добавляйте так, как это нужно в вашем конкретном случае.
    4. Имеет смысл добавить стили по умолчанию для h1-h6 (например, размер шрифта), для td (сделать text-align: center) и т.д.

    Что вам делать дальше:

    Приступайте к решению задач по следующей ссылке: задачи к уроку.

    Когда все решите — переходите к изучению новой темы.

    CSS хаки. Особенности кроссбраузерной верстки.

    Кроссбраузерность кода – основное требование для верстальщика практически в любой web-студии. Для достижения этой задачи есть масса способов. Главный из которых – тщательно продуманная структура документа. Однако, если структура html страницы сложна, или придумать структуру так, чтобы она одинаково отображалась во всех браузерах, не удалось, на помощь верстальщику приходят всевозможные css-хаки. Не претендую на оригинальность или уникальность подборки трюков в этой статье, но постараюсь описать как можно больше способов и инструкций по достижению кроссбраузерности.

    Основная головная боль верстальщика в 99,99% связана с браузерами от Microsoft, т.е. с Internet Explorer. Сайт, одинаково хорошо интерпретируемый Opera, Mozilla, Safari и Chrome, может выглядеть совершенно по-разному в Internet Explorer 8, Internet Explorer 7, не говоря уже о более ранних версиях.

    Наиболее красивое решение для обеспечения кроссбраузерности с Internet Explorer — использовать условные комментарии в HTML коде. Суть в том, что для каждой версии браузера создается свой CSS файл, в котором проблемные свойства определенным образом перезаписываются:

    Будет работать только в IE6 и ниже:

    Условие может быть таким: IE – для любой версии IE

    lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v

    lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же

    gte IE v – (greater than or equal) – для IE, версия которых больше или равна v

    gt IE v – (greater than) – для IE, версия которых больше v.

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

    Как лучше подойти к кроссбраузерной верстке?

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


    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 reset — кроссбраузерное решение. —

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

    Для чего нужен css-reset?

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

    отображается в IE без отступов, в Firefox — с отступами сверху в 1em, в Opera — с отступом 1em сверху и снизу блока. Общего стандарта для браузеров нет, кроме того, существуют непопулярные браузеры, имеющие специфичные движки и опять таки собственные наборы стилей. Для того, чтобы обеспечить одинаковое отображение страниц во всех браузерах, очевиднее всего использовать собственный набор стилей для всех элементов по умолчанию.

    Мой css-reset основан на html5boilerplate — очень клёвом наборе полезных фич для веб-разработчика.

    Также, мой css-reset включает в себя набор вспомогательных классов, значительно упрощающих вёрстку.

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