CSS от А до Я как добиться кроссбраузерности


Содержание материала:

Андрей Аносов

Веб-разработка → Оптимальный способ создания кроссбраузерных CSS

При верстке веб-сайтов очень часто возникает ситуация, когда невозможно написать набор css-свойств, который будут одинаково хорошо понимать все основные браузеры. И если с браузерами Firefox, Google Chrome, Opera и Safari такая проблема чаще всего не возникает, то в случае с различными версиями Internet Explorer добиться кроссбраузерной верстки очень сложно. Поэтому для решения этой проблемы нужно написать часть css-свойств специально для некоторых версий IE (чаще всего это IE6 и IE7). Сделать это можно двумя способами: первый — использование условных комментариев Internet Explorer (Conditional comments), второй — применение css-хаков (например, *margin-left:10px или _margin-left:10px). Оба способа имеют ряд недостатков, но, к счастью, есть еще одно решение, которое я считаю самым оптимальным для создания кроссбраузерных css-файлов.

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

Недостатки такого способа заключаются в следующем:

  • мы получаем дополнительные http-запросы для подгрузки файлов со стилями для различных версий Internet Explorer, что негативно скажется на времени загрузки страницы;
  • стили разбиваются на разные файлы, что очень сильно затрудняет их поиск во время работы над версткой сайта (я сам очень часто работал с такими проектами, где отдельные css-файлы для ie7 являются нормой, и потратил кучу времени на понимание, откуда же, черт возьми, грузится тот или иной стиль для IE).

Причем второй недостаток я считаю очень существенным. И в этом плане даже использование css-хаков для IE кажется более удачным способом добиться кроссбраузерной верстки. Но у css-хаков тоже есть недостаток — сайт, на котором они используются не пройдет валидацию. Если валидация веб-страницы не важна, то можно использовать хаки, но существует более изящное решение, чем первые два, которое лишено описанных выше недостатков. С его помощью можно писать все стили в одном файле, который успешно пройдет валидацию. Этот способ описан на сайте Пола Айриша. Его суть заключается в том, что с помощью условных комментариев мы не подгружаем дополнительный css-файл, а просто выставляем особый класс для тега , подобно тому, как выставляет классы js-библиотека Modernizr.

Код для открывающего тега , таким образом, будет выглядеть так:

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

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

Кроссбраузерная верстка в современных условиях — общее понимание необходимого принципа

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

Именно поэтому я дам определение данному термину и подробно опишу, что это такое, объясню, почему возникает проблема разного отображения одного и того же сайта на html и css в различных браузерах и дам несколько полезных советов. Давайте начнем разбор полетов!

Кроссбраузерность, покажи свое лицо!

Все из вас знают английское название термина «кроссбраузерность»: cross-browser. В дословном переводе это означает: «работающий во всех браузерах». Вот по сути и была названа главная цель кроссбраузерности: способствовать идентичному отображению веб-сайта в любом существующем браузере.

Это означает, что независимо от того, в каком ППО для просмотра html-страничек вы откроете сервис, его стилевая разметка не должна измениться.

Почему же все такие проблемные?

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

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

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

Второй проблемой некорректного отображения объектов на страницах веб-сервисов могут стать браузерные стандартные значения. Так, в каждом продукте, будь то Chrome, Safari, Opera или другие, для большинства свойств и атрибутов установлены некие значения по умолчанию. В качестве примера можно назвать разные отступы от края экрана для тега body.

И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке [urlspan] https://www.w3.org[/urlspan]).

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

Рецепты для решения проблем с идентичностью отображения

Познакомившись с основными «камнями преткновения» на пути к кроссбраузерности, вы, вероятно, задали себе вопрос: «А как же тогда сделать сайт, функционирующий во всех браузерах одинаково?». Чтобы ответить на этот вопрос, я решил перечислить базовые решения и полезные советы по порядку.

    Запомните, верстать юзабилити сайта нужно сразу для всех указанных заказчиком браузеров. Невозможно написать ресурс только, например, для Chrome и не столкнуться впоследствии с проблемами в других браузерах. Вы потратите больше времени на исправление кода. Чтоб этого избежать поэтапно проверяйте проделанную работу сразу во всех браузерах. Для этого существуют специальные программы-помощники:
    — для IE был разработан Explorer Tester, в котором можно проверять сразу все версии,
    — для Opera стоит использовать официальный сайт http://www.opera.com/dragonfly/ ,
    — для названного выше Google Chrome приложение Firebug ( http://getfirebug.com/releases/lite/chrome/ ),
    — для Mozilla Firefox — [urlspan]https://addons.mozilla.org/ru/firefox/addon/firebug/[/urlspan].

При этом есть свои определенные хитрости. Каждый раз тестить сервис во всех указанных системах затратно по времени. Для этого начните верстать сайт для Firefox или Chrome (однако я бы советовал первый), периодически проверяя его в IE седьмой версии (она самая проблемная).

Реже стоит проверять в IE девятой версии, Safari и Opera. Ну и напоследок в Firefox или Chrome в зависимости от того, что вы выбрали вначале.

Почему же так? Движок Gecko близок к оперовскому и WebKit-у, который используют продукты Google и Apple. Большинство фейлов случается в старых версиях Explorer, поэтому внешний вид веб-сервиса в них нужно проверять чаще всего.

  • Со второй выше описанной проблемой поможет справится ручной сброс параметров css или CSS Reset. Если вы хотите подробнее ознакомиться с названным подходом – что я вам настоятельно рекомендую, – то прочтите один из предыдущих уроков, касающийся очистки css-стилей. Благодаря данному подходу базовые значения в ППО для просмотра веб-страниц будут обнуляться.
  • Чтобы справиться с приведением программного кода к утвержденным стандартам, я советую вам перейти по ссылке на сайт W3C и внимательно ознакомиться с документацией. Данная организация также создала свой собственный валидатор для проверки приложений в онлайн-режиме тремя способами: по ссылке на ресурс, по загруженному файлу и непосредственно сам код, внесенный в диалоговое окно. Кстати, ранее этой теме я посвятил целую статью. Так что можете детальнее познакомиться с программами-валидаторами и узнать, для чего они нужны. Конечно фанатично увлекаться подгонкой кода под стандарты не надо, стоит обратить внимание только на важные правила.
  • Не поленитесь установить наиболее популярные браузеры последних версий у себя на компьютере для оптимизации своей работы.
  • На самом деле можно еще много чего написать на эту тему. Но я считаю, что на данном пункте полезных рецептов стоит остановиться, так как о важных моментах я вам рассказал.

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

    А я прощаюсь с вами. Обязательно подписывайтесь на мой канал, ведь далее я расскажу вам об адаптивной верстке! И не забудьте поделиться ссылкой на мой блог с друзьями. Пока-пока!

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

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

    Топ-пост этого месяца:  Виджет Place Autocomplete от сервиса Google Maps

    Основная головная боль верстальщика в 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-хаки.

    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 правило.

    На данный момент использую следуее:

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

    2 ответа 2

    Отдельные файлы для каждого браузера и их подключение через JavaScript

    Я бы сделал отдельный css-файл для каждого браузера, затем с помощью JavaScript определял браузер клиента, затем с помощью JavaScript подключал соответствующий файл (по сути создаём тэг link ).

    Если правил не так и много, то можно с помощью JavaScript создать тэг style и его контент (предварительно определив браузер клиента).

    Чистый CSS: условные стили для браузера (хаки)

    Если не желаете связываться с JavaScript, есть интересное решение в рамках CSS на англ SO.

    Суть его в том, что вы указываете стили для каждого браузера инвидувиально через вендорные префиксы, @media или @supports :

    Под .selector подразумевается нужный вам селектор.

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

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


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

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

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

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

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

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

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

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

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

    Кроссбраузерность сайта: просмотр сайта в разных браузерах и исправление багов

    Здравствуйте, уважаемые читатели! Подумал и решил, что настало время посвятить пост такой важной составляющей оптимизации и раскрутки сайта как кроссбраузерность, которая означает корректность отображения ресурса в наиболее популярных обозревателях; кроссбраузерность сайта можно оценить с помощью просмотра в разных браузерах.

    Я не исключаю, что в недалеком будущем поисковые системы Яндекс и Гугл будут поощрять проекты, отличающиеся корректностью css и html кода, а также оптимальной кроссбраузерностью, добавлением определенной величины тИЦ и ПР (PR) сайта, которые являются отражением трастовости проекта. По-моему, это было бы справедливо, ведь данная работа отнимает много времени и сил.

    Топ-пост этого месяца:  Google+ и возможности этой социальной сети — вход , ленты, круги, брендовые страницы и

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

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

    Ведь мы получаем посетителей на свои сайты, которые пользуются совершенно разными браузерами, к тому же совершенно различных модификаций. Например, в данное время еще очень большой процент посетителей пользуется старыми версиями Internet Explorer (8,7 и даже 6), несмотря на то, что уже давно вышла обновленная 9 версия. Это касается и других популярных браузеров: Firefox, Google Chrome, Opera и Safari. Вот я и перечислил те браузеры, к которым следует адаптировать сайт или блог WordPress, поскольку остальные занимают очень маленькую долю.

    Я думаю, вы знаете, что если сайт красиво и правильно отображается в браузере, в котором вы с ним работаете, это совершенно не означает, что также он будет выглядеть в остальных. Наиболее выделяется наличием багов (bug — ошибка, англ.) IE, особенно его старые модификации. Это получается потому, что различные браузеры по-разному интерпретируют код html и правила каскадных таблиц стилей css.

    Резюмируя вышесказанное, необходимо отметить, что кроссбраузерность была и пока остается одной из наиболее острых проблем в веб-разработке. Само по себе следование веб стандартам, в том числе html и css, дает достаточно высокий уровень совместимости, однако это касается только опытных вебмастеров, которые верстают сайт ”с нуля”. В современных условиях подавляющее большинство пользуется передовыми разработками, такими как CMS (Content Management System — система управления контентом) Joomla, WordPress и другими.

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

    И последнее. Особняком стоят старинные версии IE (6,7,8), которыми пока пользуются некоторые посетители, соответственно мы не можем ими пренебрегать, однако с ними проблем больше всего. Дело в том, что даже если html и css коды прописаны корректно и сайт красиво и одинаково выглядит во всех популярных браузерах (кстати IE9 тоже относится к их числу, поскольку в последнее время Microsoft прилагает немало усилий, чтобы вернуть потерянные позиции в борьбе с конкурентами, в том числе путем более внимательного отношения к применению международных стандартов касательно использования html и css), тем не менее в вышеупомянутых вариациях IE часто возможны искажения.

    Ниже мы рассмотрим некоторые варианты, которые позволяют достичь оптимальной кроссбраузерности. Хочу только сказать, что при иcпользовании CMS (например, WordPress) в качестве ”помощника” в построении вашего ресурса желательно время от времени проверять, как он выглядит в популярных браузерах, которыми пользуются посетители.

    Просмотр и проверка сайта в разных браузерах

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

    Кстати, в одной из своих конкурсных работ я анализировал отзывы о сервисе Userator, который предоставляет услуги по накрутке этих самых поведенческих факторов. Лучший, на мой вкус, сервис по оценке кроссбраузерности — BrowserShots. Работа с ним предельно проста. Вводите на главной странице в поле «Enter URL Here» адрес вашего проекта:

    Выбираете из списка нужные версии браузеров (все вводить нет смысла, поскольку совсем старые версии используются мизерным числом пользователей); причем заметьте, что можно выбирать также браузеры, используемые разными операционными системами:

    При желании выберите определенное разрешение экрана и глубину цвета из выпадающего меню «Screen Size» и «Color Depth»:

    Также, если хотите, можете включить (enable) или выключить (disabled) JavaScript, Java или Flash; кроме того, можно выбрать конкретную версию JavaScript:

    После описанных выше телодвижений нажимаете кнопку «Submit» и ждете результата. Процесс формирования скриншотов может занять некоторое время (в зависимости от числа отмеченных для проверки браузеров от 3 минут до получаса, возможно даже больше), так что можно выпить чашечку кофе или зеленого чая. После этого получите результат:

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

    Как я уже говорил, соблюдение стандартов (валидности) в использовании кодов html и css обеспечивает кроссбраузерность ресурса. Можно осуществить проверку сайта на ошибки html кода, а также проверку валидности css w3c валидатором. Но я также отмечал, что в старых версиях Internet Explorer использовались невалидные коды, поэтому, пока значительная часть потенциальных читателей пользуется не обновленными модификациями этого браузера, приходится как-то выкручиваться для достижения кроссбраузерности сайта.

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

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

    Но в скором времени старые варианты Internet Explorer уйдут в небытие, а начиная уже с 9 версии проблем возникнуть не должно, соответственно уменьшится необходимость использования хаков и, как следствие, большее число css элементов верстки будут обладать необходимой валидностью. Видите, как тесно переплетены понятия валидности и кроссбраузерности. Здесь очень важно выбрать любимое мной правило ”золотой середины”, которым я очень часто пользуюсь не только в профессиональной деятельности, но и в жизни.

    А теперь о технических деталях. Для того, чтобы использовать хаки, необходимо по моему примеру создать текстовый файл (назвать его, скажем, как в моем случае, ie.css) в корневой папке вашей темы ваш_сайт/public_html/wp-content/themes/название_вашей_темы (путь примерно такой). Затем прописать следующую css конструкцию:

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

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

    Теперь можно увидеть этот комментарий в коде страницы, для этого нажимайте правую кнопку мышки и выбирайте «Просмотр кода страницы» из контекстного меню (либо нажав комбинацию клавиш Ctrl+U), если используете в качестве основного браузера Google Chrome. В случае других браузеров: если вы пользователь Internet Explorer выбираете «Просмотр HTML кода», Firefox — «Исходный код страницы», Opera — «Исходный код»:

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

    С этим все. Это был еще один шаг к достижению кроссбраузерности сайта. Напоследок я все-таки хочу еще дать информацию о том, как производить незначительные изменения в коде css, чтобы исправить те или иные несоответствия в различных браузерах. Поясню на собственном примере. Мне не понравилось, к примеру, как выглядела форма комментариев в Мазиле (скачать браузер Mozilla Firefox бесплатно), в то время как в основном браузере Google Chrome, в котором я работаю с блогом, была вполне приемлемой:

    Чтобы понять, какие элементы css отвечают за форматирование того или иного стиля, можно воспользоваться замечательной, на мой взгляд, опцией, которая существует практически во всех новейших версиях популярных браузеров (Opera, Internet Explorer). В Mozilla Firefox эта опция реализуется с помощью плагина Фаербуг (Firebug — как скачать, установить и пользоваться одним из лучших расширений для браузера Firefox).

    Чтобы вызвать эту функцию в случае, если работаете в браузере Google Chrome, нажимаете правую кнопку мыши и выбираете из контекстного меню «Просмотр кода элемента» (также можно воспользоваться клавишей F12); для Opera — из контекстного меню «Проинспектировать элемент», для IE9 выбирайте из верхнего меню «Сервис»→«Средства разработчика» (либо опять же F12), для Mozilla Firefox, как я говорил, необходимо установить Firebug (при этом в верхней панели инструментов браузера будет отображаться значок ”жучка” ). Мне кажется, это наиболее удачное решение, хотя я пользуюсь подобной опцией Хрома, поскольку он является моим рабочим браузером.

    Топ-пост этого месяца:  WebForMySelf - публикация тематических материалов по веб-разработке и сайтостроению


    При вызове этой опции окно браузера будет поделено на 2 основные части, в нижней из которых можно экспериментировать с элементами страницы. Нижняя часть разделена еще на две, в левой представлены элементы html кода, в правой — css. Причем, внося изменения в css код, например, не бойтесь что-то испортить, потому что эти изменения не вступят в силу до редактирования файлов css вашей темы. Будет только наглядно показано, как будет выглядеть элемент после внесения изменений. Так очень удобно, кстати, получать какие-то знания по основам языков html и css, так как теоретические познания тут же подкрепляются практикой.

    Итак, что же изменил в элементах моей формы комментариев для улучшения кроссбраузерности? Я изменил значение элемента w >. Если кликнуть по этому элементу, он окрасится в синий цвет, соответственно область поля комментариев — в синий муар (это очень удобно!).

    В правой части, соответствующей коду css, для изменения значения (ширины поля комментариев) надо кликнуть прямо по значению 600px. Строчка также окрасится в синий цвет, после чего ее можно редактировать, проставив необходимое значение (в моем случае я изменил на 650):

    Для того, чтобы изменения вступили в силу, нужно внести соответствующие коррективы в файл style.css текущей темы:

    После этого не забывайте нажать «Обновить файл». Затем можно посмотреть измененные параметры в тестируемых браузерах (в этом примере, напомню, Мозилла и Гугл Хром):

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

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

    CSS reset — кроссбраузерное решение. —

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

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

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

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

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

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

    Кроссбраузерность HTML страниц: зачем нужны reset.css и normalize.css

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

    Браузеры и базовые стили

    Дело в том что каждый браузер имеет по умолчанию некий набор базовых стилей которые он применяет к странице по умолчанию. И если мы создадим страницу на «голом» html без оформления и стилей, браузер все равно отобразит тег

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

    Чтобы убрать эти различия, и сделать по умолчанию отображение страницы во всех браузерах одинаковым — используют специальный .css файл: reset.css или normalize.css

    reset.css — что он делает и как его использовать

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

    Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях которые мы зададим в style.css.

    Скачать reset.css

    Скачать reset.css можно на сайте cssreset.com

    Или можете скачать версию Eric Meyer’s “Reset CSS” 2.0 по кнопке ниже, с моего блога:

    normalize.css — как он работает и в чем разница

    После того как на странице подключен reset.css все стили приходится прописывать заново. И каждый раз это занятие утомляет. Поэтому на смену resetпришел другой инструмент — normalize. Normailze — как понятно из названия, не сбрасывает все стили, а нормализует, приводит их к единому виду во всех браузерах. После его применения базовые стили отображения заголовков, размер шрифтов, отступы… — унифицируются и отображаются во всех браузерах одинаково. Используя его — можно сэкономить определенное количество времени, которое в случает с reset было бы потрачено на прописывание сброшенных стилей.

    Если вы еще не использовали normalize.css то рекомендую попробовать его в своем следующем, прокте, и кто знает, возможно вы уже не сможете от него отказаться ��

    Скачать normalize.css

    Или загрузить с моего блога:

    Что лучше reset или normalize?

    Однозначного ответа нет.

    Первый — сбрасывает все стили, второй — приводит к единому знаменателю. Опытные верстальщики, которые используют reset.css обычно имеют свои наборы стилей которые сразу же подключают после reset для оформления контента. И им не приходится каждый раз в новой верстке заново определять стили для базовых элементов. Так поступаю и я. Мне удобно и я знаю какие стили я задаю по умолчанию, и как они работают.

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

    Каждый инструмент хорош, главное правильно его использовать ��

    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-хаки.

    Добавить комментарий