CSS исключение использование элемента и поддержка браузерами


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

CSS исключение: использование элемента и поддержка браузерами

Весь этот шум вокруг CSS-гридов в последнее время заставил меня задуматься: какие ещё потрясающие CSS-фичи доступны нам сегодня?

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

Еще раз вкратце о CSS-переменных

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

Я впервые увлёкся CSS-переменными ещё в 2014, и с тех пор они не выходят у меня из головы. И только сейчас я внедряю их в свои реальные проекты, и покажу вам, как легко их использовать.

Объявление переменной

Объявить кастомное свойство просто: нужно создать нужное свойство с двумя дефисами в начале. Их можно объявлять где угодно, но добавлять их к :root сегодня считается хорошим подходом.

Доступ к переменной

Работать со свойством также просто. Сначала обращаемся к нему с помощью функции var(), а уже внутри используем свойство, объявленное выше.

Просто и восхитительно, правда?

CSS-переменные легко использовать и запомнить. Наибольшая проблема с ними (как и в CSS в целом) — правильно выбрать время и место для их использования. Если разбрасывать их по коду как попало, стили неизбежно окажутся в беспорядке, и отлаживать это всё станет очень трудно.

Следует рассматривать подходящие применения и стратегии работы с ними, и именно на это стоит обратить пристальное внимание.

Интересный способ использования: отзывчивые модули

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

Пример с Sass

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

Одна из проблем заключается в большом количестве медиавыражений и переменных, которые вроде бы связаны друг с другом, но на самом деле нет. Для этих переменных можно использовать Sass maps, с которыми получилось бы больше порядка, но главная проблема, на мой взгляд, это использование нескольких переменных для определения одного свойства. Это просто неправильно.

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

CSS-переменные спешат на выручку

CSS-переменные не нужно объявлять заранее, они динамические. Это полезно в различных случаях. Их можно изменять по условию из любого места и в определённых контекстах, к примеру в медиавыражениях.

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

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

В чём разница между CSS- и Sass-переменными?

Между Sass- и CSS-переменными большая разница, и у каждых есть свои плюсы и минусы.

Sass-переменные можно лучше организовать

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

CSS-переменные относительно молоды, поэтому правильные подходы ещё не развились. Sass maps и массивы невозможно представить в CSS, поэтому этим новым организационным паттернам придётся привносить что-то новое и решать проблемы иначе, чем в Sass.

CSS-переменные изменяются динамически

CSS-переменные обрабатываются динамически браузером в процессе выполнения, тогда как Sass-переменные используются во время компиляции CSS.

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

CSS-переменные — это стандартная браузерная фича

Я считаю, что чем больше можно удалить из Webpack, Gulp и какой-там-новый-фреймворк-сейчас-в-моде, тем лучше. Благодаря интересным браузерным фичам не придётся полагаться на компиляцию и JavaScript-фреймворки, в том, что важно для разработчиков. Смею полагать, что бОльшая часть фронтенд-разработчиков используют переменные в CSS так или иначе, поэтому, если все начнут использовать эту встроенную фичу, это будет выглядеть разумно. А значит, этап сборки (и так уже слишком необъятный, с чем, думаю, никто не поспорит) станет на одну частичку меньше, и в интернете будет больше порядка.

А что с поддержкой браузерами?

Поддержка выглядит замечательно с одним вопиющим исключением: IE 11. Большинство современных браузеров поддерживают CSS-переменные, только в Edge есть некоторые баги.

78.11% — выше чем у CSS-гридов (на момент написания этой статьи), но из-за отсутствия поддержки в IE11 могут быть проблемы.

Ну что, можно уже использовать CSS-переменные?

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

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

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

WebComplex – самостоятельное создание сайтов

Все о самостоятельном создании сайта

Как узнать поддерживает ли браузер HTML/CSS свойства?

Частенько бывает, что необходимо уточнить, какой процент браузеров поддерживает то или иное CSS свойство или HTML элемент. Дать ответ в такой ситуации поможет отличный online сервис.

Знакомьтесь – мощный онлайн помощник, в вопросе поддержки браузерами CSS/CSS3 свойств и HTML/HTML5 элементов:

Как узнать поддерживает ли браузер HTML/CSS свойство?

Узнать поддерживает браузер нужное вам свойство – очень просто, достаточно вбить его в поиск:

В скрине выше я вбил тег HTML5 article и мгновенно получил график поддержки данного тега, разными версиями браузеров. Все наглядно и очень просто ��

Обратите внимание на настройки и возможности

У этого сервиса есть очень полезные настройки:

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

Узнать поддержку CSS/CSS3 свойств

Используя все тот же поиск вы можете узнать какие браузеры поддерживаю введенное CSS/CSS3 свойство, увидеть статус работы над этим свойством и в какой версии языка CSS оно было введено.

Узнать % поддержку CSS/CSS3 и HTML/HTML5 определенной версией браузера в Вашем регионе

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

Сравнение браузеров между собой

На этом сайте можно провести сравнение поддержки браузерами разных свойств, например вот так отличаются версии InternetExplorer`a между собой:

Как узнать о поддержке браузером CSS свойства?

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

Как я могу знать, поддерживает ли данный браузер указанное CSS свойство? Можно ли это узнать на одном CSS?

2 ответа 2

С помощью одного CSS

Узнать, поддерживает ли данный браузер указанное CSS свойство, можно через CSS директиву под названием @supports.

Эта директива работает так же, как и @media.

Так же можно установить свойства при условии, если браузер не поддерживает указанное CSS свойство

Ещё можно проверить несколько свойств сразу, используя оператор and

А если нам нужно хотя бы одно рабочее свойство, можно использовать оператор or

Но нужно учесть, что данная директива новая и в IE вообще не работает.

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

С помощью JS

Данную задачу, с помощью JS, я знаю, как решить двумя способами:

Использовать аналог CSS @Supports только на JS — функцию CSS.supports()

Так же, как и в CSS, можно указать несколько свойств.

Но так же, как и в CSS, этот метод является новым и не будет работать в IE вообще.

Проверить с помощью применения стилей через JS.

Суть этого метода в том, что браузер не может установить свойству элемента значение, которое не поддерживает. Таким образом, если, после применения нового значения свойству через JavaScript, оно не изменилось, то браузер не поддерживает данное значение.

В итоге у нас выходит следующая функция:

И вот так это работает:

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

Преимущество этого метода в том, что он будет работать во всех браузерах.

Поддержка браузерами технологий HTML5 и CSS3 Текст научной статьи по специальности « Автоматика. Вычислительная техника»

Аннотация научной статьи по автоматике и вычислительной технике, автор научной работы — Новожилов Андрей Вячеславович, Акулов Геннадий Сергеевич

Исследованы вопросы перехода на новые технологии веб-программирования HTML5 и CSS3, которые упрощают процесс создания интерактивных веб-сайтов за счет внедрения новых элементов и атрибутов. Проведено исследование уровня поддержки браузерами указанных технологий, выявлено, что не все браузеры на данный момент в полной мере поддерживают HTML5 и CSS3. Рассмотрены такие браузеры, как Google Chrome, Opera, Safari, Firefox, Internet Explorer.

Похожие темы научных работ по автоматике и вычислительной технике , автор научной работы — Новожилов Андрей Вячеславович, Акулов Геннадий Сергеевич,

BROWSERS SUPPORT OF HTML5 AND CSS

The problem of transition to the new web-programming technologies HTML5 and CSS3 are researched in the article. These technologies simplify the process of web-programming by introducing new elements and attributes. A study of the level of browser support these technologies, it is revealed that not all browsers at the moment to fully support HTML5 and CSS3. Considered browsers such as: Google Chrome, Opera, Safari, Firefox, Internet Explorer.

Текст научной работы на тему «Поддержка браузерами технологий HTML5 и CSS3»

ПОДДЕРЖКА БРАУЗЕРАМИ ТЕХНОЛОГИЙ HTML5 И CSS3

© А.В. Новожилов, Г.С. Акулов

Ключевые слова: HTML5; CSS3; стандарты; технологии веб-программирования.

Исследованы вопросы перехода на новые технологии веб-программирования HTML5 и CSS3, которые упрощают процесс создания интерактивных веб-сайтов за счет внедрения новых элементов и атрибутов. Проведено исследование уровня поддержки браузерами указанных технологий, выявлено, что не все браузеры на данный момент в полной мере поддерживают HTML5 и CSS3. Рассмотрены такие браузеры, как Google Chrome, Opera, Safari, Firefox, Internet Explorer.

В течение последних лет в сети Интернет наблюдается бум развития и популяризации интерактивных веб-сайтов [1]. Серьезным шагом в этом направлении стало появление HTML5 — технологии, призванной сделать Интернет быстрее, проще и доступней для каждого, а также в связке с CSS3 заменить Adobe Flash во многих ее нишах. Дополнительно к этому HTML5 является единственным унифицированным разметочным языком, полноценно работающим наравне с родными языками программирования большинства современных мобильных операционных систем, таких как Android, iOS, Windows Mobile, Blackberry and WebOS [2].

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

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

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web» [4]. CSS3 — это новый стандарт оформления HTML-документов, значительно расширяющий возможности предыдущего стандарта. Многие возможности, которые были труднодоступны в CSS2.1 и требовали использования дополнительных внешних программ, написания скриптов (JavaScript, VBScript), могут легко достигаться в CSS3 за счет использования новых свойств оформления.

Отметим, что новые CSS3 свойства поддерживаются только в современных браузерах: IE9+, Firefox 3.6+, Opera 10+, Chrome 12+, Safari 5+. Наиболее полно под-

держивающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera). Бывший когда-то самым распространенным браузером Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но все еще содержит значительное количество ошибок. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3.

Для проверки поддержки браузером веб-стандартов (в т. ч. и различных частей стандарта CSS) был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.

В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в нее отступы и рамки. Ранние версии Internet Explorer (4 и 5) реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer 5 эту модель также понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE 5.

В браузере Mozilla при поддержке этого свойства под собственным «рабочим» названием -moz-box-sizing ввели еще одно значение -padding-box, таким образом, создав третью блочную модель, в которой width — это размер содержимого и отступов блока, не включая рамки.

HTML5 — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете [5]. Это пятая версия HTML-стандарта (изначально созданного в 1990 г. и последней версией которого являлся HTML4, стандартизированный в 1997 г.) и находится в стадии разработки по состоянию на февраль 2013 г. Основной ее целью является улучшение языка,

Топ-пост этого месяца:  Личный кабинет Wordpress плагины для создания, настройка

Рис. 1. График динамики уровня поддержки браузерами технологии HTML5

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

Даже несмотря на то, что HTML5 был хорошо известен среди веб-разработчиков в течение нескольких лет, он стал основной темой СМИ только в апреле 2010 г. После этого глава компании Apple Inc. Стив Джобс написал публичное письмо, заголовок которого гласил: «Мысли по поводу Flash», где он заключил, что с разработкой HTML5 нет больше необходимости смотреть видеоролики или использовать другие виды приложений с помощью Adobe Flash. Но разработчики должны принимать во внимание различия браузеров и необходимость поддержки различных частей стандартов, равно как и функциональные различия между HTML5 и Flash.

Технология HTML5 имеет несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных и строчных элементов, например, (блок навигации по сайту), (обычно относится к нижней части страницы или последней строке HTML-кода) или и вместо . Некоторые устаревшие элементы, которые можно было использовать в HTML, были исключены, включая чисто оформительские элементы, такие как и , чьи эффекты выполняются с помощью каскадных таблиц стилей [7].

Наиболее популярным тестом в сети Интернет, позволяющим проверить совместимость используемого

посетителем браузера с будущим стандартом HTML5, является тест html5test.com, который оценивает браузер пользователя и ставит ему оценку от 0 до 550. На рис. 1 представлен график динамики уровня поддержки браузерами технологии HTML5 по данным html5test.com [8]. Стоит отметить, что использование последних версий браузеров позволит работать с сайтами, написанными на технологиях HTML5 и CSS3. Однако еще многие пользователи используют старые версии браузеров.

Несмотря на то, что IE отстает по многим показателям поддержки технологий HTML5 и CSS3, процент использования этого браузера достаточно высок. На рис. 2 представлен процент использования разных браузеров по данным Statcounter [9].

Таким образом, на данный момент HTML5 и CSS3 поддерживают не все браузеры, однако Google Chrome, Opera и Mozilla FireFox обеспечивают максимально возможную поддержку новых стандартов. Технологии HTML5 и CSS3 заметно упрощают процесс создания интерактивных веб-сайтов, и скорее всего большинство пользователей со временем перейдет на браузеры с поддержкой HTML5 и CSS3.

Рис. 2. Процент использования браузеров по Statcounter

1. Clarke A. Hardboiled Web Design. Penarth, UK, 2010. 400 p.

2. Meier R., Mahemoff M. Google I/O 2011: HTML5 versus Andro >

3. Доля рынка мобильных устройств. URL: http://www.netmarket-share.com/ (дата обращения: 29.10.2013).

4. История создания и развития CSS3. URL: http://kulibaba.net/web-development/css (дата обращения: 29.10.2013).

5. Результат исследования рынка технологий HTML5. URL: http://www.advertology.ru/article115910.htm (дата обращения: 20.06.2013).

6. Differences from HTML4. W3C Working Draft 28 May 2013. URL: http://www.w3.org/TR/html5-diff/ (дата обращения: 30.10.2013).

7. Pilgrim M. Dive into HTML5. URL: http://diveintohtml5.info/ (accessed: 25.10.2013).

8. HTML5 Test. Timeline. URL: http://html5test.com/results/desk-

top.html (дата обращения: 25.10.2013).

9. Статистика браузеров за октябрь 2013 г. URL: http://webrowser.ru/ rynok/statistika-internet-brauzerov-v-oktyabre-2013-goda.html (дата обращения: 11.10.2013).

Поступила в редакцию 20 ноября 2013 г.

Novozhylov A.V., Akulov G.S. BROWSERS SUPPORT OF HTML5 AND CSS3

The problem of transition to the new web-programming technologies HTML5 and CSS3 are researched in the article. These technologies simplify the process of web-programming by introducing new elements and attributes. A study of the level of browser support these technologies, it is revealed that not all browsers at the moment to fully support HTML5 and CSS3. Considered browsers such as: Google Chrome, Opera, Safari, Firefox, Internet Explorer.

Key words: HTML5; CSS3; standards; technology; webprogramming.

5 нетривиальных моментов разработки фронтэнда на CSS

Ребята из Noveo нашли статью о некоторых аспектах использования CSS, на которые при верстке следует обратить особое внимание. После перевода материал был отдан на вычитку штатной верстальщице Светлане. Светлана нашла в статье несколько спорных пунктов, добавила комментарии и предложила свои варианты решений — предлагаем вам почитать интересную полемику двух фронтенд-разработчиков!

Фронтэнд-разработчик WebiNerds Евгений Половный охотно делится знаниями и опытом с коллегами, организуя тренинги и воркшопы, а также с читателями ГитХаба, публикуя часть своих материалов в книге на GitHub. WebiNerds адаптировали части этой книги для настоящей статьи.

Введение

Многие разработчики считают, что сделали достаточно, если что-то «работает». Я думаю, сегодня это одна из самых больших проблем в нашей индустрии. На своем последнем воркшопе я попытался обратить внимание на некоторые нюансы фронтенд-разработки, указать на проблемы, которые мы часто встречаем, работая с CSS.

Возьмем, например, флексбокс, представленный в CSS3. К сожалению, многие программисты, работающие во фронт-энд-разработке, не изучают флексбокс — или, по крайней мере, не делают это тщательно. Очень важно понимать разницу между флексбоксом и float-макетом, не только в общем, но и на глубоком уровне. Разработчики вполне могут написать какой-то работающий код (т.е. на экране визуально все нормально работает), не понимая, что происходит за фасадом — а следовало бы.

У CSS много нюансов. Рассмотрим 5 интересных моментов этой технологии, включая flexbox и float, на которые стоит обратить особое внимание.

Свойство CSS Float

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

Здесь мы должны приостановиться и рассмотреть термин «поток рендеринга». Этот термин может сбивать с толку. Что он на самом деле значит? Когда веб-страница загружается, наш браузер сначала загружает структуру Document Object Model (DOM). Затем, прежде чем отрисовать страницу, браузер должен найти блоки в DOM, соответствующие свойствам CSS в CSS файле (или файлах). Поток описывает порядок операций для механизма визуализации браузера. По сути поток — это то, как браузер решает, где каждый элемент будет размещен перед рендерингом. Только после того, как браузер все это сделает, сайт будет визуально отражен на экране.

Направление потока с выровненными элементами.

Трудность с CSS Float

В тот момент, когда строится HTML-страничка, обтекаемые элементы не распознают другие элементы в DOM (Document Object Model), за исключением текстовых элементов, таких как

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

) или строчно-блочные элементы ( ), или рядом с

. Неожиданное поведение может возникать потому, что отображение обтекаемых элементов зависит от окружающих их объектов, и обтекаемые элементы «не видят» элементы нетекстовые .

Мы можем решить эту проблему, добавив элемент к DOM между других элементов:

Но как мы знаем, пустые и нефункциональные элементы в DOM – плохая практика.

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

Есть и более элегантное решение. Мы просто добавляем отдельный класс для элементов, требующих очистки. Этот класс CSS устраняет необходимость нефункциональных элементов в DOM:

Светлана: Способов «зачистки» ( clearfix ) обтекаемых элементов было придумано довольно много, но как известно, чем меньше строчек, тем легче файл. Вот самый короткий вариант из всех существующих:

Этот способ зачистки будет работать во всех современных браузерах, поддерживающих псевдоэлементы (IE9+). Если требуется поддержка IE8, просто удалите одно двоеточие перед after. Подробное описание этого способа можно прочитать здесь: http://nicolasgallagher.com/micro-clearfix-hack/.


Свойство CSS Position

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

Светлана: Автор безусловно прав в том, что относительно позиционированные элементы не влияют на основной поток. Однако здесь стоит внести ясность: в потоке резервируется место под элемент, как если бы к нему применялось свойство position: static . После этого элемент смещается на указанное расстояние (свойства top , bottom , left и right ). В своем новом месте обитания элемент уже не в потоке и может наслаиваться на другие элементы.

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

Распространенная ошибка при работе с position : попытка растянуть элемент с position: absolute до полной ширины страницы:

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

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

Светлана: Говоря про позиционирование элементов и их рендеринг относительно друг друга, очень важно упомянуть такой термин, как «контекст наложения» (stacking context). Это не самый простой термин из вокабуляра фронтендщика, но я попробую объяснить его на пальцах.

Контекст наложения тесно связан с понятием потока. Представьте себе нормальный поток рендеринга. Ко всем элементам применяется position: static (значение по умолчанию), никаких float’ов и других влияющих на поток свойств нет. В этом случае есть всего один контекст наложения, принадлежащий окну браузера. Именно по этой причине абсолютно позиционированный div в примере выше будет рассчитывать высоту и ширину от окна браузера, а не от тега html или body .

Теперь давайте создадим еще один контекст наложения. Свойств, которые за это отвечают, существует несколько: position (кроме static ), transform и даже opacity . Предлагаю использовать наиболее распространенный прием – добавим body свойство position: relative .

В результе создается новый контекст наложения относительно тега body . Т.е. теперь любой вложенный в body тег с position: absolute будет позиционироваться относительно body .

Очень важно переварить и усвоить эту идею. Этот прием частенько называют «позиционирование относительно родителя», и он бывает чрезвычайно полезен в ряде случаев, будь то центрирование или responsive-таблицы.

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

Контекст наложения влияет на абсолютно позиционированные блоки. Блоки с фиксированным позиционированием всегда будут располагаться и рассчитывать свои значения в % (например, высоту) относительно окна браузера.

Еще хотелось бы внести ясность в то, что значат значения свойств top , bottom , left и right . Казалось бы, все просто: это значения, говорящие браузеру, где отобразить блок. Это так, но… Рассмотрим пример: есть блок со значением top: 100px . Если у него позиционирование relative , то это будет означать, что браузер отрисует его на 100px ниже его первоначального отображения. При этом помним, что место под его первоначальное отображение резервируется.

Теперь изменим позиционирование на абсолютное. Как уже знаем из примеров выше, новое положение будет рассчитываться от границ контекста наложения. Т.е. на 100px ниже верхней границы окна браузера, при этом его горизонтальное смещение может интерпретироваться по-разному разными браузерами. Чтобы создать кроссбраузерную картинку, лучше всегда задавать не только top или bottom , но еще и left или right .

Вместо окна браузера отсчет может происходить от блока с новым контекстом.

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

На блоки с позиционированием static значения свойств top , left и т.п. не влияют. Т.е. браузер их просто проигнорирует. Советую это запомнить, т.к. весьма удобно «сбрасывать позиционирование» в отдельных медиазапросах, используя position: static .

Свойство флексбокс (Flexible Boxes)

Флексбокс новее, чем свойства float и position . Он был разработан для того, чтобы предложить другой способ расположения элементов, и основан на другом образе мышления. Флексбокс предлагает больше возможностей позиционирования и возможностей определять отношения между элементами, чем свойства float и position — потому что флексбокс позволяет вам располагать элементы относительно друг друга. Это важно. С float и position элементы располагаются относительно страницы. С флексбоксом элементы соотносятся только между собой.

Это открывает перед нами много восхитительных возможностей. Например, мы можем поменять расположение элемента, меняя его порядковый номер только в CSS. Таким способом элементы легко подвинуть или поменять местами. Трудность с флексбоксом в том, чтобы понять, КАК и ПОЧЕМУ он работает именно таким образом. Это новая парадигма, которая, соответственно, требует нового образа мышления. Для начинающих разработчиков, только вступающих на этот путь, это может не быть такой уж большой проблемой. Но разработчикам-ветеранам нужно научиться думать так же, как флексбокс. В наши дни это обязательный скилл для всех разработчиков.

Светлана: Ключевое отличие стандартных сеток на флексах от сеток на float’ах (например, bootstrap) заключается в том, что для флексов нет необходимости создавать обертку ( > в bootstrap), группирующую колонки. При помощи свойства flex-wrap (которое, кстати, есть только в 2 из 3 синтаксисов флексбокса) колонки сетки могут переходить на «новую строку», если для них недостаточно места на текущей. При этом не требуется применять clearfix , а следовательно, отпадает необходимость в дополнительной разметке. Поскольку поддержка этой возможности все еще не достаточно хорошая (IE10+, Android 4.4+), нужно думать о полифиле. К сожалению, на момент написания этих строк универсального полифила для всех фич флексбокса еще не придумали. Существующие решения либо не готовы к продакшену по причине большого количества багов, либо работают хорошо, но требуют серьезной оптимизации (создают ощутимые задержки при отрисовке страницы). Но мы можем с уверенностью применять в качестве полифила сетку «на инлайн-блоках» ( display: inline-block ). Такая сетка тоже не требует дополнительной разметки, а колонки переходят на новую строку, если не помещаются на текущей.

Трудности флексбокса

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

Из-за проблем с поддержкой браузеров (в старых версиях браузеров) возможность использовать флексбокс в проекте зависит от потребностей клиента. Если заказчик настаивает на поддержке старых браузеров, о флексбоксе не может быть и речи. Если же заказчик ориентируется на современные браузеры, я однозначно использую флексбокс.

Светлана: Этот момент, на мой взгляд, спорный. Можно полифилить большую часть случаев, для которых применяется флексбокс, даже для IE8+.

Также есть очень полезный SASS-миксин для обеспечения оптимальной кроссбраузерной поддержки:

Разные типы верстки: адаптивная vs отзывчивая

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

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

Почти каждый современный вебсайт использует смесь адаптивной и отзывчивой верстки. Возьмите, например, TechCrunch:

Обратите внимание, как рубрика «Избранные новости» (Featured Stories) размещается справа от рубрики «Смотреть репортаж Crunch» («Watch Now Crunch Report»), когда окно на рабочем столе широкое, но затем перемещается вниз, когда окно сужается. Это «отзывчивая» верстка. Однако там происходит намного больше. Обратите внимание, как изменяется весь заголовок, когда окно уменьшается в размерах. В версии, оптимизированной для мобильных девайсов, у нас есть только меню «гамбургер», логотип TechCrunch и иконка космического корабля (при клике на которую разворачивается лист топ-историй):

В десктопной версии сайта у нас абсолютно другой заголовок:

Элементы не просто перераспределены, чтобы вместиться в подходящую для мобилок версию. То, что мы видим — два абсолютно разных макета, две абсолютно разные версии интерфейса.

Мы можем делать адаптивные макеты в CSS с помощью медиа-запросов:

Медиа-запросы позволяют нам уточнить критерии, определяющие, какую версию сайта отображать. В большинстве случаев эти критерии являются параметрами разрешения экрана. Иногда мы можем использовать DPI (Dots Per Inch, буквально – «Количество точек на дюйм», измеряющее плотность пикселей на экране) чтобы определить, какую версию показать. Дополнительно мы можем использовать медиа-запросы и попытаться определить, сенсорный девайс или нет. Для нацеливания на продукты Apple особенно полезен ресурс stephen.io, поддерживаемый Стефеном Гилбертом (Stephen Gilbert). Stephen.io перечисляет медиа-запросы к мобильным девайсам Apple, делая максимально простым определение конкретной модели iPhone или (еще лучше) ВСЕХ моделей iPad с помощью всего одного медиа-запроса:

Сложность с адаптивным дизайном

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

Светлана: Веб-технологии меняются стремительно: меняется стандарт, разработчики со всего мира придумывают различные приемы, улучшающие интерфейсы и упрощающие разработку. Далеко не все термины, которыми пользуются фронтендщики, можно найти в спецификациях. В связи с этим у новичков и даже у опытных разработчиков часто возникает вопрос «а чем отзывчивый макет отличается от адаптивного или резинового?». Сейчас я немного побуду занудой. Термины не просто так становятся общеупотребимыми. Их таковыми делают книги и статьи выдающихся разработчиков. Так вот, четкие различия между этими типами макетов можно посмотреть на liquidapsive.com. Примеры на этом сайте не противоречат тому, как Итан Маркотт (Ethan Marcotte) определяет отзывчивые макеты в своих книгах и статьях (послуживших основой современному тренду), или тому, какая идея была в основе первых адаптивных макетов в далеком 2006-м. Это полезно знать, однако термины невозможно заморозить. И сейчас, особенно среди русскоязычных разработчиков, «адаптивный» и «отзывчивый» стали почти синонимами.

Адаптивные CSS-фреймворки

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

Создание сетки с различными значениями ширины для различных размеров экрана во фреймворке Foundation.

Полноценные фреймворки, такие как Bootstrap и Foundation, представляют собой больше, чем просто систему сеток. Они также предоставляют JavaScript-плагины, правила CSS и элементы дизайна. В последнее время я работаю практически исключительно на Foundation. Не потому, что Bootstrap способен на меньшее, скорее потому, что Bootstrap предлагает так много опций для визуальной адаптации, что нам просто не нужно столько для наших проектов. За счет дополнительной функциональности Bootstrap шире. Bootstrap отличный, особенно если у вас в команде нет дизайнера и вы хотите использовать все встроенные элементы дизайна. Как бы то ни было, мне обычно просто нужны функциональные элементы CSS-фреймворка, а не элементы дизайна.

Светлана: Bootstrap также предлагает простецкий интерфейс, чтоб вырезать ненужные части фреймворка.

Хотя существуют и другие фреймворки, Bootstrap и Foundation могут удовлетворить практически 100% потребностей разработки. И, к счастью, довольно просто выучить оба этих фреймворка. Оба хорошо задокументированы и имеют большое сообщество активных пользователей, которые могут помочь и ответить на вопросы.

За CSS-фреймворками — будущее. Если вы пока не используете какой-нибудь из них, стоит серьезно задуматься над тем, чтобы приобщиться!

Выводы

Сейчас — увлекательное время для CSS и фронтенд-разработки. Благодаря (относительно) новым инструментам, таким как свойство флексбокс, и CSS-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

Использование CSS

Каскадные таблицы стилей (CSS) представляют собой язык описания внешнего вида Web-документов.

Преимущества каскадных таблиц стилей (CSS)

Неодобрению подверглось большинство элементов форматирования HTML версии 4.0, и Консорциум W3C запретил их использовать. Web-дизайнерам стали рекомендовать к использованию CSS (Cascading Style Sheets — каскадные таблицы стилей).

Главные преимущества которых заключаются в:

  1. Более чистом коде, который:
    • легко поддерживается;
    • быстрее загружается;
    • лучше оптимизирован для поисковых систем.
  2. Модульном коде, для которого характерны:
    • возможность применения правил стиля ко множеству страниц;
    • единообразный дизайн;
    • код легче поддерживается.
  3. Силе дизайна, включающей в себя точность контроля (позиционирование, размер, поля и др.).
  4. Разделении труда.
  5. Лучшей доступности, для которой характерно:
    • использование тегов по назначению;
    • отсутствие необходимости в позиционировании невидимых картинок;
    • возможность переписывания пользователями стилевых таблиц автора.

Попробуй обратиться за помощью к преподавателям

Правила CSS

Этими правилами определяются стили элементов или групп элементов.

В правилах используется следующий синтаксис:

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

Этим правилом определяется цвет текста во всех параграфах (темно-зеленый), его размер (10 точек), шрифт текста (Verdana).

Комментарии в CSS

В CSS они начинаются символом «$/*$» и заканчиваются «$*/$». Например:

color:red; $/*$ Текст во всех параграфах должен быть красного цвета $*/$

CSS применяют в HTML или XHTML, используя методы связывания (linking), внедрения (embedding) и встраивания (inlining).

В связанном методе таблицы стилей создаются и хранятся в отдельных файлах с расширением .css . Их называют связанными (внешними) стилями.

Задай вопрос специалистам и получи
ответ уже через 15 минут!

Во внедрённом методе CSS хранятся в виде HTML-страниц в теге между тегами и представляют собой внедрённые (внутренние) стили.

Встроенный метод CSS хранится непосредственно в атрибуте стиля HTML и называется встроенным стилем, например:

Наиболее используемым является первый метод.

Связывание

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

Тег link состоит из 3 атрибутов:

  • rel сообщает браузеру тип и цель ссылки;
  • type сообщает браузеру MIME-тип подключаемого файла;
  • href сообщает браузеру URL для нахождения файла (в данном примере URL относительный, а может быть и абсолютным).

В «style.css» содержится одно правило, указывающее на то, что текст в параграфе должен отображаться полужирным шрифтом:

Встраивание

Пример встраивания правила приведен в теге:

Внедрение

Внедренные (внутренние) CSS используются в динамически генерируемых страницах, однако это использование рекомендуют сделать минимальным.

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

CSS находится в элементе . Атрибутом type=»text/css» браузеру сообщается, что внедрённый стиль написан на CSS и должен быть использован для форматирования страницы. А стилевое правило p указывает браузеру выполнить выделение всего текста в любом параграфе полужирным шрифтом.

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

Сокращение времени загрузки веб-страниц с помощью CSS

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

  1. Нужно избегать по возможности использование таблиц при разметке страницы.
    • Приведем причины, по которым лучше использовать CSS для разметки страниц:
    • браузерами анализируются таблицы дважды: первый раз для оценки структуры таблицы, а второй — для определения их содержимого;
    • таблицы отображаются сразу полностью, а не по мере загрузки;
    • в таблицах используются прозрачные картинки для определения ширины колонок и т.п.;
    • для CSS характерен гораздо меньший код, который выносится во внешний файл, загружаемый всего однажды и хранящийся в кэш-памяти браузера;
    • CSS позволяет осуществлять контроль очередности загрузки элементов страницы.
  2. Не нужно использовать картинки при отображении текста. Большинство кнопок и надписей отображаются с помощью CSS.
  3. Загрузку картинок, в том числе и фоновых изображений, лучше осуществлять с помощью CSS. К примеру, для отображения картинки размером 200х100, можно использовать следующий код:

, которому соответствует код CSS: pretty-image

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

Используйте контекстные стили. Вместо присваивания класса каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:

Данный код укажет браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

  • Используйте сокращения при указании шрифтов, границ, фона.
  • Минимизируйте пробелы, переводы строк и комментарии. Каждый лишний символ будет увеличивать размер страниц. Поэтому необходимо как можно меньше нажимать клавиши Enter и Tab в процессе вёрстки. А также важно не забывать про объединение CSS-стилей.
  • Важно использование относительных ссылок, так как абсолютные занимают намного больше места и создают дополнительную нагрузку на браузер.
  • Не нужно увлекаться использованием META-тегов.
  • Необходимо выносить CSS и JavaScript в отдельные файлы.
  • Нужно ставить знак «/» в конце ссылок на каталоги.
  • Этот знак сразу дает понять, что указанная ссылка ведет в каталог, и необходимости в дополнительной проверке нет.

    Так и не нашли ответ
    на свой вопрос?

    Просто напиши с чем тебе
    нужна помощь

    Поддержка функций и полифилы

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

    По правде говоря, веб-сайты не должны выглядеть или работать одинаково в любом браузере. Насколько точно веб-сайт работает в каждом браузере — тем определяется и ваш уровень комфорта для данного сайта. Если сайт получает меньше полпроцента трафика от Internet Explorer 6, то может иметь смысл отказаться от его поддержки. Если полпроцента по-прежнему содействует тысячам долларов в продажах, поддержка должна быть обязательной. Определите, что является приемлемым для данного сайта и отталкивайтесь от этого.

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

    HTML5 Shiv

    HTML5 Shiv был создан Реми Шарпом, чтобы обеспечить возможность использовать элементы HTML5 в версиях Internet Explorer 8 и ниже. HTML5 Shiv не только создаёт поддержку элементов HTML5, но и позволяет оформлять их надлежащим образом с помощью CSS.

    HTML5 Shiv должен быть загружен с Google, где Реми поддерживает последнюю версию, а затем размещён на вашем сервере. Для лучшей производительности ссылайтесь на JavaScript-файл внутри документа, после любых ссылок на таблицы стилей. Кроме того, вам надо ссылаться на файл внутри условного комментария, убедившись в том, что файл загружается только в версиях Internet Explorer 8 и ниже.

    В этом случае условный комментарий выглядит как . .

    Кроме того, когда новые элементы HTML5 создаются с помощью HTML5 Shiv, любые блочные элементы должны быть определены и обновлены с помощью декларации display: block .

    И, наконец, Internet Explorer 8 и 9 неправильно определяют стили для некоторых строчно-блочных элементов HTML5. Как и прежде, эти стили должны быть указаны явно. После чего все версии Internet Explorer должны хорошо работать с любыми новыми элементами HTML5.

    Определение функций браузера

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

    Определение функций, предлагаемое Modernizr, обеспечивает способ написания CSS и JavaScript на основе того, поддерживает браузер или нет конкретную функцию. К примеру, если браузер поддерживает скруглённые уголки, Modernizr добавит класс borderradius к элементу . Если браузер не поддерживает скруглённые уголки, Modernizr добавит к класс no-borderradius .

    Загрузка Modernizr

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

    Стоит отметить, что Modernizr может быть сконфигурирован так, чтобы включать HTML5 Shiv, в этом случае на него не нужно ссылаться после Modernizr.

    Применение условных стилей

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

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

    Демонстрация определения функций

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

    При работе с определением функций CSS3, сложно сказать, как стили будут выглядеть в браузерах, которые не поддерживают возможности CSS3. К счастью, есть букмарклет с названием deCSS3, который отключает какие-либо возможности CSS3. Это позволяет увидеть, как веб-сайт будет выглядеть без CSS3 и как ваши условные стили работают. Чтобы быстро получить представление о том, что каждый браузер поддерживает, посетите haz.io через ваш браузер.

    Условная загрузка файлов

    Вдобавок к условной загрузке стилей, Modernizr также предоставляет возможность условной загрузки файлов, основываясь на поддержке функций. При этом могут быть загружены полифилы на JavaScript на основе определения функций. Modenizer с помощью yepnope.js может быть сконфигурирован для включения загрузчика ресурсов Modernizr.load .

    Загрузчик ресурсов Modernizr.load протестирован для большинства возможностей HTML5 и CSS3, которые могут быть определены в условии test . Если условие проходит, загружаются любые файлы, указанные в блоке yep . Если условие не пройдено, загружаются любые файлы, указанные в блоке nope . Оба блока yep и nope являются необязательными, но, по меньшей мере, один из них должен быть указан. Создание этих вариантов позволяет вам загружать файлы только на основе того, включено или выключено конкретное условие.

    Одной удивительной особенностью загрузчика ресурсов Modernizr.load является то, что он может загружать внешние файлы, причём не только JavaScript, но и CSS.

    Несколько файлов могут быть эффективно загружены с помощью нескольких условий за счёт применения операторов && и ||. Оператор && соответствует логическому И, в то время как оператор || соответствует логическому ИЛИ. В следующем примере используются несколько условий для загрузки разных файлов, при этом загружая только необходимые файлы за один раз. Если поддержка атрибута autofocus или CSS-анимации недоступна, тогда загружается библиотека jQuery. Если доступна поддержка для каждой отдельной функции, то загружаются отдельные полифилы.

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

    Условная загрузка на основе медиа-запросов

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

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

    Условный запуск скриптов

    Вдобавок к условной загрузке файлов, Modernizr также помогает условно запустить JavaScript. Все возможности HTML5 и CSS3, доступные для проверки в загрузчике ресурсов Modernizr.load , также могут быть проверены в скриптах. Например, это может быть отключаемая всплывающая подсказка на мобильных устройствах, потому что там нет возможности навести курсор мыши, вместо того чтобы показывать всплывающую подсказку на экране в виде текста. Скрипт для вызова этих всплывающих подсказок может располагаться в условии Modernizr, запрещая загрузку скрипта на маленьких экранах.

    Демонстрация условного запуска скриптов

    Выше приведён базовый пример того, как JavaScript может быть запущен на основе условия, заданного в Modernizr. При загрузке страницы, если ширина экрана меньше 800 пикселей, то ничего не происходит. Но если ширина экрана больше 800 пикселей, при загрузке слово «маленький» будет заменено на «большой», основываясь на выполненном JavaScript.

    Полифилы для HTML5 и CSS3

    В настоящее время существуют полифилы почти для всех разных функций HTML5 и CSS3. Команда Modernizr собрала довольно исчерпывающий список. Эти полифилы могут быть выброшены в случае необходимости.

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

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

    Пожалуй, самой страшной частью веб-дизайна и разработки является кроссбраузерное тестирование, которое позволяет убедиться, что сайт хорошо работает во всех браузерах. Вообще говоря, более современные браузеры, Chrome, Firefox и Safari, всё делают очень хорошо. Самые крупные подводные камни поджидают в Internet Explorer и тестирование различных версий Internet Explorer может быть сложным.

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

    Рис. 9.01. VirtualBox работает на Mac OS X с Internet Explorer с 6 по 9 версии


    Microsoft предлагает несколько VirtualPC, которые могут быть использованы исключительно для тестирования. Установка их всех может оказаться сложнейшей задачей. К счастью, Грег Торнтон написал программу автоматической установки для всех этих виртуальных машин. Установка занимает некоторое время, чтобы загрузить все эти разные виртуальные машины и требует приличное количество дискового пространства. Подготовьтесь соответственно, установив только необходимые виртуальные машины и заранее очистив необходимое дисковое пространство. В зависимости от того, насколько часто используются виртуальные машины, может быть стоит установить их на внешнем жёстком диске.

    Internet Explorer 8 и выше содержит встроенные средства разработки, к сожалению у версий 7 и ниже такого нет. Веб-инспектор и все другие инструменты отладки, которые мы любим, недоступны в Internet Explorer 7 и ниже. Существует, однако, букмарклет Firebug Lite, который предлагает чрезвычайно полезный инспектор в браузере.

    Рис. 9.02. Internet Explorer 7 работает внутри виртуальной машины с букмарклетом Firebug Lite, открытым для отладки

    Решения CSS3 для Internet Explorer

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

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

    Прозрачность

    Вероятно, что все разработчики сбиты с толку тем, что Internet Explorer все еще не поддерживает данное очень популярное (хотя и проблематичное) свойство. Оно используется повсюду уже так давно, что все успели забыть, что в действительности — это свойство CSS3. Хотя IE не поддерживает свойство opacity , он предлагает схожие эффекты прозрачности с помощью его собственного свойства filter :.

    Синтаксис

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

    Значение прозрачности, которое устанавливается в конце каждой строки свойств для IE, работает также как и значение свойства opacity. Получая число от 0 до 100 (Свойство opacity использует двухпозиционное число в диапазоне от 0 до 1. Например, «44» для IE будет эквивалентно «0.44» для других браузеров). Установки прозрачности наследуются элементами потомками, что может сбивать с толку при работе.

    Демонстрация

    Данный элемент имеет синиий цвет фона (#0000FF), но с прозрачностью 40%, что делает его голубым при выводе

    Тот же элемент без установок прозрачности.

    Недостатки

    Свойство filter используется только в продуктах Microsoft, то есть ваш CSS не пройдет проверку

    Как и в случае использования свойства opacity , значение свойства filter IE наследуется всеми элементами потомками

    Скругленные углы

    Свойство border-radius (часто упоминаемом как скругление углов в CSS3) — другое популярное нововведение CSS3. Данное свойство позволяет разработчикам избегать чрезмерного кодирования на JavaScript или дополнительного позиционирования элементов для достижения данного замечательного эффекта. Но IE не имеет никакой поддержки данного свойства.

    Remiz Rahnas разработал файл HTC, который называется Скругленные углы CSS (его можно загрузить с Google Code). Решение может использоваться в таблицах стилей, предназначенных только для IE.

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

    Синтаксис

    Код может выглядеть примерно так:

    В идеальном случае нужно использовать свойство behavior только в таблицах стилей для IE, применяя такой же селектор в CSS, таким образом скрипт будет получать значения радиусов.

    Демонстрация

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

    Недостатки

    • Файл HTC имеет 142 строчки кода (минимизация или архивирование могут помочь, но не снимут проблему полностью)
    • Свойство behavior делает ваш CSS недействительным
    • Ваш сервер должен иметь возможность загружать файл HTC для использования данной техники
    • Похоже, что IE8 имеет ту же проблему при использовании файла HTC с элементами со скругленными углами , которые имеют отрицательные значения свойства z-index

    Тени прямоугольников

    Свойство box-shadow является еще одной полезной особенностью CSS3, которая добавляет элементам натуральную тень. IE не поддерживает свойства box-shadow , но свойство filter предлагает достойную альтернативу.

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

    Синтаксис

    В дополнение к свойствам для браузеров WebKit и Mozilla вы можете установить фильтр, который работает во всех версиях Internet Explorer.

    Демонстрация

    Данный элемент имеет тень, которая выводится и в Internet Explorer.

    Недостатки

    • Установки фильтра для теней в IE не соответствуют в точности свойству box-shadow . Для достижения одинакового вида нужно будет проводить точные настройки значений, что может быть достаточно серьезной проблемой.
    • Свойства фильтра не проходят проверку, как и свойства для WebKit и Mozilla. Таким образом данный недостаток присущ всем браузерам.

    Тень текста

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

    К сожалению, добавление тени к тексту в Internet Explorer не является таким уж простым процессом — даже с использованием фильтра. Для решения проблемы существует плагин jQuery, разработанный датским веб дизайнером Kilian Valkhof.

    Синтаксис

    Сначала в CSS нужно установить свойство text-shadow :

    Значения задают цвет тени, положение по горизонтальной оси, положение по вертикальной оси и степень размытия.

    После подключения библиотеки jQuery и плагина к вашему документу можно вызывать плагин:

    Плагин позволяет также использовать параметры для изменения свойств CSS.

    Демонстрация

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

    Недостатки

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

    • Для того, чтобы тени выглядели очень похоже во всех браузерах, нужно будет установить специальные настройки только для IE во время разработки страницы
    • Требует подключения библиотеки jQuery, то есть дополнительно 61-строки кода
    • Версия тени в IE никогда не выглядит также, как и в других браузерах
    • При использовании параметров для плагина, которые изменяют установки значений свойства в CSS, плагин работает некорректно, выводя корявые тени
    • В отличие от версии CSS3 плагин не поддерживает множественные тени
    • По каким-то причинам для того, чтобы все работало в IE8 нужно задать для элемента значение z-index

    Градиенты

    Создание градиентов для фона является отличной техникой CSS3, которая помогает сохранить время разработки. Хотя Internet Explorer не поддерживает градиенты CSS3, очень легко реализовать их с помощью определенного синтаксиса.

    Синтаксис

    Для определения градиента, который будет выглядеть одинаково во всех браузерах, включая все версии Internet Explorer, нужно использовать следующий код CSS (две последних строчки предназначены для IE):

    Для фильтра IE GradientType может иметь значения “1″ (горизонтально) или “0″ (вертикально).

    Демонстрация

    Данный элемент имеет линейный градиент, который действует в Internet Explorer.

    Недостатки

    • Ваш CSS файл не пройдет проверку. Данное утверждение будет верно и для значений для браузеров WebKit и Mozilla
    • Другой код нужен для IE8, что увеличивает время разработки
    • Градиенты WebKit и Mozilla позволяют объявлять “стоп”, что не возможно для градиента IEы
    • Фильтр IE не может определять «радиальный» градиент, который поддерживается в WebKit и Mozilla
    • Для того, чтобы градиент был видимым в IE, элемент должен иметь шаблон (то есть для него должны быть установлены свойства, определяющие его графические параметры, например, высота и ширина )

    Прозрачные цвета фона (RGBA)

    CSS3 имеет еще один метод использования прозрачности, который затрагивает альфа канал для заданного цвета фона. Internet Explorer не поддерживает данное свойство, но его можно воспроизвести.

    Синтаксис

    Для совместимых с CSS3 браузеров синтаксис для установки альфа канала цвета фона выглядит следующим образом:

    Правило CSS устанавливает для цвета фона значения RGB и дополнительно изменяет значение альфа на 0.4 . Для имитации в Internet Explorer можно использовать фильтр для создания градиента с одинаковыми начальным и конечным цветами, которые соответствуют значению прозрачности. Такое свойство может быть включено в таблицу стилей только для IE, которая будет аннулировать предыдущие установки.

    Градиент выглядит одинаково в IE ид других браузерах, дублируя эффект прозрачности RGBA.\

    Демонстрация

    Первый пример работает в браузерах, которые поддерживают RGBA, а второй работает только в Internet Explorer:

    Данный параграф имеет фоновый цвет с прозрачностью 40%, заданный с помощью RGBA

    Параграф использует фильтр IE для имитации прозрачности RGBA (работает только в IE).

    Недостатки

    • Свойство filter не проходит проверку
    • Требуется дополнительная строка CSS для IE
    • Элемент должен иметь шаблон

    Составные фоны

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

    Синтаксис

    В Firefox, Safari, и Chrome для использования составных фонов служит следующее правило CSS:

    Для использования двух фонов на одном элементе в IE служит следующее правило:

    Демонстрация

    Ниже приведенный элемент имеет составной фон, который выводится в Chrome, Safari и Firefox (в IE ничего не видно):

    Ниже приведенный элемент имеет составной фон, который выводится в IE (в других браузерах выводится только один фон):

    Недостатки

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

    Вращение элементов (трансформации CSS)

    CSS3 имеет набор трансформации и анимаций, которые некоторым могут показаться неуместными для CSS. Тем не менее, существует способ имитации вращения элемента в Internet Explorer? хотя и в ограниченном виде.

    Синтаксис

    Вращение элемента на 180 градусов (переворот по вертикали):

    Для такого действия в IE используется фильтр:

    Параметр вращения может иметь следующие значения 1, 2, 3, или 4. Что соответствует соответствующему повороту на 90, 180, 270, или 360 градусов.

    Демонстрация

    Ниже приведенный элемент выводит текст вверх ногами с помощью свойства filter . Для более наглядной демонстрации элемент имеет темно серую границу шириной в 3 пикселя снизу. При повороте элемента граница выводится сверху.

    Данный элемент перевернут на 180 градусов.

    Недостатки

    • Таблица CSS не пройдет проверку.
    • В то время как Mozilla и WebKit позволяют вращать с шагом в1 градус, фильтр IE позволяет использовать только 4 стадии вращения, что ограничивает его гибкость.

    Заключение

    Хотя IE не поддерживает CSS3, это не значит, что в нем нельзя реализовать подобные свойства.

    Помните о том, что когда нужно изменять настройки CSS для IE, или приходится использовать JavaScript, jQuery или файл HTC, следует использовать условное комментирование. Таким образом браузерам не нужно будет делать лишних HTTP запросов.

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

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
    Перевел: Сергей Фастунов
    Урок создан: 4 Октября 2010
    Просмотров: 79902
    Правила перепечатки

    5 последних уроков рубрики «CSS»

    Забавные эффекты для букв

    Небольшой эффект с интерактивной анимацией букв.

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

    Анимированные буквы

    Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

    Раскрывающаяся навигация

    Экспериментальный скрипт раскрывающейся навигации.

    Как исключить конкретное имя класса в селекторе CSS?

    Я пытаюсь применить фоновый цвет, когда пользовательская мышь навевает элемент, чье имя класса «reMode_hover» .

    Но я не хочу менять цвет, если элемент также имеет «reMode_selected»

    Примечание. Я могу использовать CSS не javascript, потому что я работаю в какой-то ограниченной среде.

    Чтобы уточнить, моя цель — раскрасить первый элемент при наведении, но не второй элемент.

    HTML

    Я попробовал ниже, надеясь, что первое определение будет работать, но это не так. Что я делаю неправильно?

    CSS

    Один из способов — использовать селектор нескольких классов (без пробела, который является селектором потомков):

    Другой вариант — использовать селектор :not()

    В современных браузерах вы можете:

    Обратитесь к http://caniuse.com/css-sel3 для информации о совместимости.

    Способ 1

    Проблема с вашим кодом заключается в том, что вы выбираете .remode_hover , который является потомком .remode_selected . Итак, первая часть правильной работы вашего кода — это удаление этого пространства

    Затем, чтобы стиль не работал, вы должны переопределить стиль, установленный :hover . Другими словами, вам нужно противопоставить свойство background-color . Таким образом, окончательный код будет

    Способ 2

    Альтернативным методом было бы использовать :not() , как указано другими. Это вернет любой элемент, который не имеет класса или свойства, указанного в скобках. В этом случае вы ставите там .remode_selected . Это будет нацелено на все элементы, которые не имеют класса .remode_selected

    Однако я бы не рекомендовал этот метод из-за того, что он был введен в CSS3, поэтому поддержка браузера не идеальна.

    Способ 3

    Третий метод заключается в использовании jQuery. Вы можете настроить таргетинг на селектор .not() , который будет похож на использование :not() в CSS, но с гораздо лучшей поддержкой браузера

    CSS свойства в разных браузерах

    Здравствуйте. Я только только начал изучать CSS. В интернете много мусора.

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

    1) Эти свойства не входят в стандарт W3C?
    2) Насколько я понял для того чтобы указать что свойство применимо для какого-то браузера, надо в начале указать префикс (-webkit или -moz. ) или ещё как ?
    3) Если нет, то где можно глянуть свойства для каждого браузера отдельно, я имею ввиду мозила например если свои какие-то поддерживает они должны быть где то описаны?

    4) Всё что по теме добавите от себя приму с благодарностью.

    09.12.2012, 22:42

    Элементы находятся в разных местах в разных браузерах
    В Хроме всё отображается как нужно, в Мозилле — надпись «Вертянка» уходит далеко от синей штуки.

    Слои в разных браузерах
    Добрый день/вечер/ночь =) Возникла «Проблемка» с отображением слоев в браузере firefox Дали.

    Input в разных браузерах
    Вот такой у меня код: .

    Смещения в разных браузерах
    Кто мне может назвать причину смещений. wall::wall::wall: в разных браузерах смещаются.

    09.12.2012, 23:15 2

    1.-o-,-moz-,-ms- не валидны.
    2.Префиксы нужно указывать только для браузеров ,которые не поддерживают стандартное сss3 свойство (например ) transform бно у них есть своя реализация свойства.
    -o-опера
    -moz-мозила
    -ms-ие
    -webkit-хром,сафари.
    3.Каждый браузер имеет свои свойства.
    http://htmlbook.ru/css клацните менюшку справа «По браузерам» и увидите свойства для отдельных браузеров.

    Припустим вам нужно сделать прозрачность блока.Вы узнали,что за это отвечает свойство
    http://htmlbook.ru/css/opacity .
    Смотрим табличку поддержки браузеров.
    Видим что везде кроме мозилы и ие везде поодерживается
    Теперь если мы зададим div то у нас везде сработает кроме ИЕ и мозылы версии 1,7.
    Для мозылы пишем -moz-opacity а для ие фильтр включаем.
    Важно заметить что поддержка мозилЫ такой версии уже давно не требуется поэтому его и не нужно писать.
    Удачи

    09.12.2012, 23:15

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

    Меню в разных браузерах
    Создаю меню с помощью списков. Начал делать в браузере Chrome, доделал и решил проверить в других.

    Разница отображения css в браузерах
    Господа хорошие! пожалуйста, разъясните в чем дело: Вставил картинку и сделал ее гипперссылкой;.

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