slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 8284
Теги: css, хаки, hacks, читы

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

Для этой цели в CSS языке были придуманны так называемые хаки(читы), которые позволяют применять группу свойств только под один браузер или несколько, например, только Opera или только Chrome/Safari.

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

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

Таблица совместимости хаков
Названия и сами хакиInternet ExplorerGoogle ChromeOperaSafariMozilla Firefox
Хак с условными коммантариями в html + - - - -
Хак через JavaScript для Google Chrome - + - - -
Хак через JavaScript для Opera - - + - -

 

_::-moz-svg-foreign-content, :root .class {}

 

- - - + -

 

html/**/body .class, x:-moz-any-link, x:default
{color : #F00 ;}

 

- - - - +

 

@media all and (-webkit-min-device-pixel-ratio:0)
{/* Здесь пишем стили в привычном виде */}

 

- + + + -

 

@supports (-webkit-appearance:none)
{ /* тут ваши стили в обычном виде */ }

 

- + + - -


Хак с условными коммантариями в html

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

Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой(в файле .php или .html, куда подключаем файл стилей добавляем такие строчки):

<!--[if IE]> <link href="/styles.css" rel="stylesheet" media="all" /> <![endif]-->

где styles.css - файл, который будет отвечать за стили только для IE.


Хак через JavaScript для Google Chrome

Единственный известный на данный момент способ написать стили только для Google Chrome, используя при этом JavaScript. При этом не нужно знать JS, достаточно взять пример отсюда и адаптировать его под свои нужды.

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

Синтаксис такой(в файле .php или .html, куда подключаем файл стилей,т.е. в <head></head> раздел, добавляем такие строчки, внутри тега <script></script>):

var isChrome = !!window.chrome && !!window.chrome.webstore;
if (isChrome) {
var $ = document;
var cssId = 'myCss';
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css'; 
link.href = '/css/template.css'; //путь к файлу стилей только для Chrome
link.media = 'all';
head.appendChild(link);
}

Единственное что вам тут нужно поменять это в 10 строчке путь до вашего файла стилей.


Хак через JavaScript для Opera

Единственный известный на данный момент способ написать стили только для Opera, используя при этом JavaScript. При этом не нужно знать JS, достаточно взять пример отсюда и адаптировать его под свои нужды.

Суть состоит в том, что мы проверяем, каким браузером пользуется посетитель сайта и если это Opera, то подключаем для него дополнительный файл стилей, в котором нужные свойства, которые могут перекрываться в основном файле стилей, выделяем !important.

Синтаксис такой(в файле .php или .html, куда подключаем файл стилей,т.е. в <head></head> раздел, добавляем такие строчки, внутри тега <script></script>):

var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent);
if (isOpera) {
var $ = document;
var cssId = 'myCss';
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css'; 
link.href = '/css/template.css'; //путь к файлу стилей только для Opera
link.media = 'all';
head.appendChild(link);
}

Единственное что вам тут нужно поменять это в 10 строчке путь до вашего файла стилей.


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

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

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    7.00
  • intuit89
    6.00
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
!important в CSS Просмотров 2334
!important в CSS

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

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее
Спрайты для CSS Просмотров 1317
Спрайты для CSS

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

Теги:

css, img, image, sprite, спрайт

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
Вклад в будущее. Приобретая услуги в нашей компании Вы можете быть уверены в стабильности и качеств...
Перейти в тему
ZOMRO аватар
Расширяем горизонты! Все тарифы высокопроизводительных и оптимальных VDS/VPS доступны теперь в двух ...
Перейти в тему
ZOMRO аватар
Дата-Центр Мы знаем, как важна надежность и безопасность хостинга для наших клиентов. Поэтому расска...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.