Коллекция практических советов и заметок по вёрстке

[mayorovp]

По пункту 3: я где-то видел такую альтернативу свойству overflow:

.container::after {
  clear: both;
}

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

[GreatRash]

Вообще, если по уму, то было бы неплохо если бы элементы вроде section этот flow-root создавали по умолчанию.

[stas404]

Глядь, а там уже и pull request )
Да, промахнулся британский ученый. Так ведь у кого-то и сердечный приступ может случиться.

[rajdee]

А как же position: sticky? Репозиторий вроде бы свежий, но почему-то этот параметр у position не упоминается. Я конечно понимаю, что существующая реализация не всем нравится, но хотя бы упомянуть можно было бы

[Serator]

+ initial / unset / device-fixed (с префиксом "-ms-").

[c01nd01r]

Кстати, интересный момент.
В черновиках, position не имеет значения inherit.
drafts.csswg.org/css-position-3/#position-property

[c01nd01r]

Спасибо, не знал.

[yadobr]

*CSS is Awesome.jpg*

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

[Serator]

На самом деле в спеках описаны классные штуки, просто полноценная поддержка сего требует длительного этапа изучения, тестирования и шлифования. Как пример, посмотрите предстоящий бум в виде спецификации CSS Grid'ов, в каком-то смысле обкатаную на уже используемых CSS Flex'ах, и тем не менее уже (если не ошибаюсь) 4 года доводимую до ума.

[Serator]

В Fx'е подальше Chrome'а продвинулись на текущий момент. Там auto-fill и auto-fit для функции repeat() уже поддерживаются, да и в ночнушке без флага, как верно заметили. уже работает, в отличие от Chrome'а. Ну и самое главное, насколько я знаю в Fx'е пилят инструменты отладки / подсветки для Flex'ов / Grid'ов (пока еще нет в ночнушке), а вот по поводу Chrome'а — без понятия. Ну и по мимо EDGE'а в Safari тоже пилят Grid'ы, так что к концу года, по идее, везде будут. :)

[psywalker]

Илюх, а как обстоят дела с Safari в этом плане?:)

[Serator]

+, у них есть специальная страничка для отслеживания статуса различных фич: webkit.org/status/#specification-css-grid-layout-level-1.

[Serator]

Вы не можете совмещать свойство position и свойство float.

Вообще-то оба свойства имеют значения по умолчанию и, следовательно, их можно использовать совместно с применением обоих, аля position: static; + float: .... :)

[Serator]

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

[Serator]

Да, от части верный, от части устаревший. У Пола Айриша есть неплохая подборка всего и вся касательно перерисовок / перекомпановок на GitHub'е — gist.github.com/paulirish/5d52fb081b3570c81e3a. Мало информации касательно `will-change` (к примеру, сколько графической памяти выделяется под сие в разных браузерах и сколько реально можно скормить отдельнх слоев?), аль о разрабатывемом CSS Containment (https://drafts.csswg.org/css-containment/). О прокрутке в документе также мало информации, зато куча всяких кривых плагинов для плавной прокрутки. Тоже самое о анимации. Узнали вдруг (и то не все), что transform не тормозит при анимации и давай его пихать везде, а чем это грозит?.. Касательно средств прокрутки тоже, в основном, устаревшие статьи. Актуальную ифнформацию в итоге можно только на английском найти, а на русском аля «как скруглить уголки». :( Тонкости нужно рассматривать и в будущее заглядывать, а не давно известные факты. ИМХО, :)

И, да, css-live.ru — как один из немногих ресурсов с более-менее качественной подборкой переводного материала. :)

[psywalker]

Простите, а почему именно «более-менее качественная»? Что вы имели ввиду?

[Serator]

:) Поправлюсь, в целом хорошая подборка материала, то бишь планка на достаточно хорошем уровне, чтобы пописаться и следить за блогом. Ну и перевод официальной документации по Material Design тоже много стоит (увы, устаревает, но тем не менее). Удачи вам. ;)

[Serator]

Вообще в статье много сомнительных утверждений (:nth-of-type(1) медленее чем селектор a b — очень сомнительно), аля пример в виде псевдо-класса :first (такого нет в CSS) и т.д., и т.п., но самое интересное, это каким образом регулярные выражения в CSS (Что это вообще такое? Неужели пародия на регулярки в аттрибутивных селекторах) влияют на перекомпановку в IE? 0_o

[psywalker]

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

[psywalker]

Ааа, ну тогда ладно:)

[komiller]

Спасибо

[NookieGrey]

14. flex