Контакты

Кроссбраузерная верстка css. Кроссбраузерный CSS3, или как бороться с Internet Explorer. Основные правила кроссбраузерной верстки

  • 26.01.2024

Добрый день, союзники!

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

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

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

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

Закругленные края или border-radius .border-radius { border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); }
Свойство background-clip: padding-box; исключает возможность того, что картинка на заднем фоне будет залезать на наши закругленные области.

Строка behavior: url(PIE.htc); подключает наш PIE файл, для поддержки данного свойства IE.

Тень блока или box-shadow .box-shadow{ box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); behavior: url(PIE.htc); }
Свойства filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); используются для IE.Градиент на фоне или background: linear-gradient() .gradient{ background-color: #444444; background: -webkit-linear-gradient(top, #444444, #999999); background: linear-gradient(to bottom, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#81a8cb", endColorstr="#4477a1"); -pie-background: linear-gradient(to bottom, #444444, #999999); behavior: url(PIE.htc); } Двойной задний фон или background: url(), url(); .multiple-background{ background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; behavior: url(PIE.htc); }
Современные браузеры, вроде, все понимают, а для IE опять используем PIE.Картинка вместо обводки или border-image: url(); .border-image{ -webkit-border-image: url("image.png") 30 round round; border-image: url("image.png") 30 round round; behavior: url(PIE.htc); }
Здесь свойство behavior не будет работать в IE10.Тень текста или text-shadow На этом прелести PIE заканчиваются. Для использования тени текста в IE, необходимо использовать, вышеупомянутую, библиотеку jQuery.textshadow.

Для использования, необходимо, для начала, в стилях указать нашу тень, для обычных браузеров
.text-shadow{ text-shadow: 1px 1px 3px #000; }

А затем, c помощью библиотеки, просим необычные браузеры IE нас понять
$(function(){ $(".text-shadow").textShadow(); })
предварительно, не забывая, подключить эту библиотеку и все, что необходимо, для ее работы.

Алгоритм расчета ширины и высоты элемента (да, именно такой перевод) или box-sizing .box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; }
К сожалению данное свойство не будет работать в браузерах IE7 и младше. На данный момент я не нашел корректного решения данного вопроса, но это вовсе не означает, что его не существует. Ставим блоки в линию или display: inline-block Прекрасное современное свойство, которое позволяет ставить блоки в один ряд, не используя свойства float и так далее. К моему сожалению, на практике, столкнулся с тем, что многие используют его в чистую. То есть так
.inline-block{ display: inline-block; }
Код в таком исполнении поддерживается лишь последними современными браузерами. Для полной поддержки, в него необходимо добавить немного строчек. Полный код таков:
.inline-block{ min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; }
Здесь
display: -moz-inline-stack; используется для понимания inline-block старой Mozilla.
Свойство vertical-align: top; выравнивает все блоки по вертикали по верху. В зависимости от задачи можно и по низу.
И наконец свойства
zoom: 1; *display: inline; _height: 250px;
используются для IE. Обратите внимание что в данном случае _height: 250 используется потому, что IE не знает свойства min-height .Прозрачность или opacity .opacity{ opacity: 0.5; filter: alpha(opacity=50); }
Обращаем внимание на то, что в фильтрах, которые используются для IE, значение прозрачности указывается в диапазоне от 0 до 100, а не от 0 до 1 как обычно.Анимация или transition .transition { -webkit-transition: all 1s ease; transition: all 1s ease; } Трансформация объектов или transform .transform{ -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); }
Свойства transition и transform не поддерживаются браузерам IE ниже 9 версии, а transition и вовсе только с 10 версии. Решения для старых IE я пока тоже не нашел. Размер заднего фона или background-size .background-size{ background: url("back.jpg") no-repeat top center; -webkit-background-size: cover; background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="back.jpg", sizingMethod="scale"); } Селекторы CSS3 Речь идет о таких селекторах как
ul li:fist-child{} ul li:last-child{} ul li:nth-child(3){} input{} a:hover{}
И других полезных селекторах: которые были добавлены в CSS3. Для того, чтобы обеспечить качественную поддержку таких селекторов, мы используем, вышеупомянутую, библиотеку Selectivizr. Чтобы она сработала, необходимо просто подключить ее перед нашим файлом CSS.
Полный список селекторов с которыми работает Selectivizr, можно ознакомиться на официальной страничке , в разделе «How does it work?».

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

Обновил свойства border-raduius и opacity. Спасибо pepelsbey за строгое замечание!

Обновил большинство свойств в соответствии с рекомендациями. Спасибо огромное пользователю Aingis за огромную помощь!

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>

Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка 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

Скачать normalize.css можно с сайта necolas.github.io/normalize.css

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

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

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

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

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

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


Когда 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.

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

  • Сначала создать общую таблицу стилей для всех браузеров, без каких-либо хаков, чтобы потом продолжить работу по исправлению ошибок при отображении страницы в IE.
  • Потом таблица стилей с исправленными ошибками сохраняется отельно и становится таблицей стилей для всех версий IE (например, all-ie.css).
  • Сохраните отдельно таблицы стилей с исправлениями ошибок отдельно для каждой версии IE (например, ie-5.0.css).
  • Далее необходимо последовательно подключить эти таблицы стилей через 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 (l ess t hen — меньше) можно также использовать lte (l ess t hen or e qual to — меньше или равен), gt (g reater t hen — больше), gte (g reater t hen or e qual to — больше или равен) главное при всем этом многообразии возможностей правильно выбрать порядок указания условных комментариев, чтобы не попасть в ситуацию, когда для некоторых браузеров группы условных комментариев пересекаются, давая неожиданный результат.

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

    Другие достоинства этого метода Используя условные комментарии, вы также получаете способ для более достоверного определения версии браузера. Браузеры, которые выдают себя за Internet Explorer, но на самом деле ими не являются, не будут использовать таблицы стилей предназначенные для IE. С помощью этого метода вы можете составить точную статистику относительно того, какую версию IE используют посетители, без ошибок, вызванных программами и браузерами выдающими себя за IE.Валидность Возможно, одной из самых приятных частей этой техники является то, что ваши таблицы стилей и ваши тщательно оформленные (X)HTML документы сохранят полное соответствие спецификации.Отладка условных комментариев Существует одно предупреждение, о котором стоит упомянуть.

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

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

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

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

    HTML-код

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

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

    Это не браузер Internet Explorer

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

    Тег не валиден.

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

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

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

    * html .style { ...}

    Например:

    Style { background : red; /* для нормальных браузеров */ //background : green; /* для всех IE */ -background : blue; /* для IE6 */ } * html .style { background : blue; /* другой способ для IE6 */ }

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

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

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

    *: first-child+html .style { ...}

    *+html .style { ...}

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

    html: root .style { ...} /* этот работает ещё и для Safari */

    Style, x: -moz-any-link { ...}

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

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

    Все пользователи сети интернет для просмотра страниц интернет сайтов используют специальные программы – браузеры. Браузер это программа, которая осуществляет связь пользователя с сервером. Браузер посылает запросы к серверу и получает ответы от него, и этот ответ преобразует в тот вид, который все привыкли называть интернет страницей со всем ее содержимым, текстом, изображениями, видео и т.д. Готовый вид страницы (расположение контента, размеры, цвет, шрифт и пр.) задается с помощью 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 и является валидным
    И содержит в себе как парные (закрывающиеся) теги, так и не парный тег

    Пример не валидного кода: Не валидный код Не валидный код HTML

    Данный HTML код не соответствует стандартам W3C и не является валидным

    Проверяем кроссбраузерность.

    Существует много способов проверить кроссбраузерность верстаемого HTML документа, самый простой из них – это поставить все популярные браузеры себе на компьютер. Но как быть с разными версиями Internet Explorer?! — спросят многие.

    Есть простой способ собрать все версии IE так сказать в одном флаконе. Вы можете скачать программу IE Tester , которая включает в себя все версии IE, начиная с IE 5.5.

    Так же Вы можете воспользоваться сервисом Browsershots.org , который позволяет сделать снимки Вашего HTML документа более чем с 40 разных браузеров.

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

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

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

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

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

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

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

    CSS3 Generator

    • Удобен и интуитивен в управлении;
    • Можно генерировать стили для своих параметров;
    • Можно посмотреть результат генерированного стиля.
    • Мало стилей




    Статьи по теме

    Последние статьи
    Популярные статьи
    Выбор редакции

    Сайт компьютерной помощи

    © Copyright 2024,
    rzdoro.ru -Сайт компьютерной помощи

    • Рубрики
    • Программы
    • Microsoft Office
    • Интернет
    • Linux
    • Программы
    • Microsoft Office
    • Интернет
    • Linux
    rzdoro.ru