Вендорные префиксы и кроссбраузерная поддержка

Вас, наверное, не удивит тот факт, что Internet Explorer не поддерживает (пока) модуль flexbox. Вот как CanIUse видит нынешнее отношение браузеров к модулю:

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

В этой части статьи вы узнаете:

Анимация эластичных блоков
Колонки равной высоты: приятное совпадение!
box-orient и box-direction
box-ordinal-group

box-flex-group и box-lines
box-pack и box-align

Ниже представлен вольный перевод статьи “CSS3 Flexible Box Layout Explained“. Для удобства восприятия информации, я разделила публикацию на 3 части.

Модуль создания макета «резиновых» блоков – часто именуемый просто flexbox – это интересная часть проекта W3C. Спецификации flexbox по-прежнему не утверждены окончательно и периодически корректируются, так что остается ждать новостей от консорциума. Тем не менее, модуль является важной частью нового арсенала свойств, которые революционизируют сам подход к верстке. По крайней мере, он будет таковым, как только получит кросс-браузерную поддержку.

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

Подготовка страницы к принятию этих запросов в действительности ничем не отличается от вызова внешнего файла CSS. Все, что нам нужно, это добавить несколько параметров в строку HTML-кода. Хорошей идеей будет создать три отдельных CSS файла для вашего сайта, каждый из которых предназначен для какого-то одного типа устройств. Очень часто вы можете встретить подобные файлы с названиями mobile.css, tablet.css и screen.css. Давайте начнем с того, что взглянем на саму ссылку и посмотрим, как мы можем структурировать ее в строке, располагаемой в заголовке файла HTML5

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

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

Наверное, все сталкивались с проблемой, когда в блоке фиксированной ширины нужно было поместить длинную фразу, например ссылку. В результате чего, этот блок начинал разъезжаться по ширине этой фразы, либо фраза вылезала за границу блока. Многие поступают неправильно – скрывают такой контент свойством overflow:hidden, грубо говоря, отрезается лишняя часть фразы, что делает ее нечитабельной.

“Зато не портит дизайн!”, – скажите Вы. Не нужно торопиться с использованием overflow:hidden, ведь существует такое замечательное свойство в CSS как word-wrap. Оно “обертывает” фразу в рамках ширины блока, разбивая ее на строки.

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

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