|
|
|
|
 Far |
| WinNavigator |
| Frigate |
| Norton
Commander |
| WinNC |
| Dos
Navigator |
| Servant
Salamander |
| Turbo
Browser |
|
|
| Winamp,
Skins, Plugins |
| Необходимые
Утилиты |
| Текстовые
редакторы |
| Юмор |
|
|
|
File managers and best utilites |
5 Flexbox методов, о которых вы должны знать. Какие браузеры поддерживают flexbox
«Старый» и «новый» Flexbox — CSS-LIVE
От редакции css-live.ru: Flexbox — один из самых ожидаемых «раскладочных» модулей CSS3, но с непростой судьбой. Мы уже писали о нелегких приключениях этой спецификации. В последнее время интерес к этому механизму особенно вырос, благодаря тому, что новый синтаксис уже поддерживается в Chrome 21+ и вот-вот начнет поддерживаться в Опере. Но изменения спецификации привели к огромной путанице как в учебных материалах, так и в справочниках о браузерной поддержке, и разобраться, где о какой редакции идет речь — об актуальной или об устаревшей — очень непросто. Надеемся, что эта статья Криса Койера поможет вам сориентироваться во всей этой путанице.
Перевод статьи “Old” Flexbox and “New” Flexbox с сайта css-tricks.com, автор Крис Койер, переводчик Илья Стрельцын
7 августа 2012 г.
Просто ради того, чтобы прояснить для всех: «Flexbox» (точнее, CSS Flexible Box Layout Module — модуль «гибкой» раскладки) претерпел за последних три года много изменений. Изменений как в спецификации, так и в том, что реализовано в браузерах.
Как отличить
При поиске информации о Flexbox вы наткнетесь на множество устаревшей информации. Вот как можно быстро ее опознать:
Если вы читаете запись в блоге (или что угодно) о Flexbox и видите display: box; или свойство с именем box-{*}, значит, перед вами старая версия Flexbox 2009 года.
Если вы читаете запись в блоге (или что угодно) о Flexbox и видите display: flexbox; или функцию flex(), значит, перед вами неуклюжий промежуточный вариант 2011 года, про который я не уверен, что его вообще хоть один браузер реализовал.
Если вы читаете запись в блоге (или что угодно) о Flexbox и видите display: flex; и свойства flex-{*}, то перед вами текущая (на момент написания этой статьи) спецификация
Примеры устаревших материалов
Все эти материалы были потрясающими на момент создания, но сейчас они устарели:
Flexie – JavaScript-полифилл (библиотечка, компенсирующая отсутствие поддержки в старых браузерах) для Flexbox, использует старый синтаксис 2009 года.
Эта статья Ричарда Шепарда в Smashing Magazine периода неуклюжей стадии 2011 года. Она мельком упоминает синтаксис 2011 года, но больше сосредоточена на синтаксисе 2009 года.
Стивен Хей уже достаточно давно пишет о Flexbox. Его вводный пост использует старый синтаксис 2009 года, затем он переработал его для синтаксиса 2011 года, к сожалению, буквально за месяц до выхода теперешнего синтаксиса.
Я впервые узнал о Flexbox благодаря статье Пола Айриша, использующей синтаксис 2009 года. На ней сверху красуется предупреждение, но ссылается на статью Стивена с синтаксисом 2011 года.
Поддержка
С браузерной поддержкой всё еще сложнее.
У старого синтаксиса 2009 года «поддержка» на удивление хороша: Chrome, Firefox 2+, Safari 3.1+… Почти всё, кроме IE9- и всех Опер. Я сказал «поддержка», потому что фактические реализации были неполными и слегка различались (из-за чего спецификацию и переписали).
Несмотря на лучшую поддержку, использовать старый синтаксис неразумно. Старая спецификация канула в Лету. Браузеры могут прекратить поддержку старого синтаксиса в любой момент. Наконец, новый синтаксис проще для понимания и наверняка будет реализован основательнее и единообразнее. Браузеры, не поддерживавшие Flexbox до сих пор, наверняка реализуют новую спецификацию, у которой уже статус CR (кандидат в рекомендации, т.е. «без пяти минут стандарт»).
Примеры
Недавно я кому-то помогал с созданием макета вида «резина-фикс-резина». Оба синтаксиса легко с этим справляются (другими средствами эта задача решается с трудом). Эти примеры могут служить хорошим индикатором для проверки браузерной поддержки (и отказа браузеров от поддержки старья).
Пример СТАРОГО синтаксиса
Пример НОВОГО синтаксиса
От редакции css-live.ru: по состоянию на текущий момент, судя по всему, новый синтаксис Flexbox реально поддерживается только в Chrome 21+, с префиксом -webkit- и в последних экспериментальных сборках Opera.Next 12.10 и Opera Mobile 12.1 (без префикса). Firefox обещает экспериментальную поддержку с 18-й версии (с префиксом -moz- уже без префикса), но для ее включения нужно будет изменить настройки браузера (в соответствии с новой политикой W3C в отношении экспериментальных фич, о которой упоминалось в статье "Горячие новости веб-стандартов"). IE10 — пока, видимо, единственный браузер, реализовавший временный синтаксис 2011 года (с префиксом -ms-). Мы будем рады любым уточнениям и дополнениям по этому поводу!
P.S. Это тоже может быть интересно:
css-live.ru
5 Flexbox методов, о которых вы должны знать / Хабрахабр
Flexbox является стандартом CSS, оптимизированным для проектирования пользовательских интерфейсов. Используя различные свойства Flexbox мы можем построить нашу страницу из небольших блоков, которые затем с легкостью сможем перемещать и изменять размеры, как нам угодно. Адаптивные веб-сайты и приложения пользуются огромным спросом в нынешней веб-индустрии.В этой статье я хочу показать вам пять flexbox методов к решению проблем компоновки при верстке. Также я приведу практические примеры для демонстрации, в которых применяются эти методы.
1. Создание столбцов с одинаковой высотой
На первых порах, это может показаться не трудной задачей, но делать столбцы, которые имеют одинаковую высоту, иногда бывает сделать очень «геморройно». min-height в данном случае использовать будет не практично, так как с увеличением количества контента, находящегося в блоке, так же будет и увеличиваться его длина.2. Изменение порядка
Некоторое время назад, если бы мне пришлось динамически изменять порядок некоторых элементов, я, вероятно, попробовал бы некоторые CSS хаки, но потом бросили бы эту затею и в расстройстве сделали бы это с помощью javascript. С flexbox же эта задача сводится всего к применению всего лишь одного свойства СSS.Это свойство называется order. Оно позволяет мне менять любое количество flex элементов и изменять их последовательность, в которой они появятся на экране. Этот параметр представляет собой целое число, определяющее положение элемента — более низкие числа означают больший приоритет.
<div> <div>...</div> <div>...</div> <div>...</div> </div> .conteiner{ display: flex; } /*Обратный порядок элементов*/ .blue{ order: 3; } .red{ order: 2; } .green{ order: 1; }
3.Горизонтальное и вертикальное центрирование
Вертикальное центрирование в CSS является одной из тех проблем, которые заставляют нас спросить себя: Как такую тривиальную вещь до сих пор так сложно сделать? И это на самом деле так. Если посмотреть в Google вертикальное центрирование CSS, то в результате поиска выскочит бесконечное количество различных методов, большинство из которых будут включать в себя таблицы и преобразования. которые предназначены для изготовления макета.Flexbox предлагает более простое решение этой проблемы. Каждый гибкий макет имеет два направления на оси (X,Y) и два отдельных свойства для их выравнивания. Мы можем позиционировать любой элемент прямо в середине родительского контейнера.
<div> <div>...</div> </div> .container{ display: flex; /*Центр по главной оси*/ justify-content: center; /*Центр по вспомогательной оси*/ align-items: center; } Пример4. Создание полностью отзывчивой сетки (Responsive Grids)
Большинство разработчиков полагаются на готовые CSS фреймворки при создании адаптивных сайтов. Bootstrap является наиболее популярным, но есть и сотни других фреймворков, которые помогут вам справиться с этой задачей. Как правило, они хорошо работают и имеют множество опций, но имеют тенденцию быть довольно тяжелыми. Если вы все хотите сделать своими руками и вам не нужных громоздких фреймвокров, тогда Flexbox именно для вас!
5. Создание идеального Sticky Footer (прилипающий футер)
Flexbox имеет простое решение этой проблемы. Применение display: flex; к тегу body позволяет построить весь наш макет страницы, на основе свойств Flex. Да чего я все говорю, да говорю? Давайте уже лучше посмотрим на практике.<body> <div>...</div> <!-- Наш липкий футер --> <footer>...</footer> </body> html{ height: 100%; } body{ display: flex; flex-direction: column; height: 100%; } .main{ /*Основной раздел будет занимать все свободное место на странице*/ flex: 1 0 auto; } footer{ /*Футер будет занимать столько места по вертикали, сколько и должен и не пикселя больше */ flex: 0 0 auto; } Вывод
Все браузеры (кроме IE 9) теперь поддерживают режим Flexbox. Если вы не использовали Flexbox до этого момента, то я рекомендуем Вам попробовать.Надеюсь, что мои советы CSS были для вас полезны и что они помогут вам создавать более качественные и более адаптивные макеты.
Жду ваших комментариев по этому поводу.
habrahabr.ru
Особенности –webkit-box или как «подружить» flexbox со старыми Safari / Хабрахабр
Проблема именно в этом! Ведь по статистике Apple, только 47% обладателей iPhone имеют возможность использовать Safari 9.2+.
А что делать остальным?
Если мы делаем красивый, качественный и суперадаптивный сайт, построенный на flexbox — так же красиво и качественно он будет отображаться только на устройствах, которые его грамотно интерпретируют.На помощь в этом приходит так называемый старый синтаксис flexbox – display: box; Это аналог свойства display: flex; только он поддерживается всеми Safari, начиная с версии 5.0+.
Однако всё не так просто:
- Display: box работает только с префиксами, в данном случае с -webkit- (display: -webk2) it-box;).
- Странно работает с float.
- Аналогов некоторым современным свойствам нет.
Как же решить уже найденные проблемы?
Прописываем вендорные префиксы для box и связанным свойствам. Обтекания внутри box прячут элементы.
Эту ошибку пофиксить легко. Достаточно элементам, имеющим float, добавить свойство position: relative.
Почему бы просто не убрать float? – А вот почему:
Я приведу список всех рабочих аналогов flex-свойств и box-свойств:
-webkit-box-orient (flex-direction) – направление оси элементов.
Бывает нескольких видов в случае нового синтаксиса:
— column – колонка; — row (по умолчанию) – строка; — row-reverse – реверсия строки; — column-reverse – реверсия колонки.
В случае старого синтаксиса я использую всего два свойства:
— vertical – колонка; — horizontal – строка.
Есть еще два свойства, но они не работают как аналоги реверсивных свойств нового синтаксиса, поэтому я не использую их в своей практике.
Для реверса есть свойство -webkit-box-direction, которое имеет 2 значения – normal и reverse.
-webkit-box-pack (justify-content) – задает выравнивание по горизонтали.
Новый синтаксис:
— flex-start, flex-end – элементы прижаты к началу/концу родителя; — space-between – распределяет элементы равномерно внутри родителя, не оставляя при этом боковых отступов; — center – центрирует элементы.
Старый синтаксис:
— start, end – аналог flex-start, flex-end; — justify – аналог space-between; — center – то же, что и center в новом.
У space-around НЕТ аналога!
-webkit-box-align (align-items) – выравнивание по вертикали. По праву могу назвать это одним из главных достоинств flexbox.
Новый синтаксис:
— flex-start, flex-end – элементы прижаты к верху/низу родителя; — baseline – дефолтное значение, выравнивание по базовой линии шрифта без учета свисаний; — center – центрирует элементы; — stretch – растягивает дочерние блоки по высоте.
Старый синтаксис:
— start, end – аналог flex-start, flex-end.
Остальные свойства идентичны
-webkit-box-ordinal-group (order) – определяет порядковый номер элемента в группе. В обоих случаях задается цифрой.
Других вариантов либо нет, либо они не работают. Например:
-webkit-box-lines – это, по идее, аналог свойства flex-wrap, но у меня он почему-то не работает.
И напоследок.
Если вам нужно применить любое CSS-свойство только для -webkit-, можете использовать рабочий CSS-хак. Он проверен и он РАБОТАЕТ:
@media all and (-webkit-min-device-pixel-ratio:0) { /*Всё, что вы сюда напишете, будет работать только с -webkit-*/ } Делитесь своим опытом и удачи!Автор статьи: Виктор Рябовол
habrahabr.ru
|
|
..:::Счетчики:::.. |
|
|
|
|
|
|
|
|