Верстка \ CSS 3

Отладка HTML с помощью расширенных  селекторов CSS

От автора: написание HTML — сложная задача. По крайней мере написание семантически обоснованного, верного HTML. Это может стать сюрпризом для тех, кто только поверхностно анализирует возможности HTML. Что может быть такого сложного в нескольких элементах, верно? По крайней мере, это не объектно-ориентированный, мультипарадигмальный язык программирования. Но как только вы начинаете копать глубже, вы понимаете, что в HTML можно во многом ошибиться.

Читать далее

Верстка \ CSS 3

Основы CSS: Анимация

От автора: CSS-анимация — отличный способ анимировать свойства CSS от одного значения к другому. В то время как мы можем использовать переходы для выполнения отдельных движений, анимация дает нам намного более тонкий контроль.

Читать далее

Верстка \ CSS 3

Несоответствия рендеринга шрифтов в браузерах

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

Читать далее

Верстка \ CSS 3

Grid - для макета, Flexbox - для компонентов

От автора: мой брат — новичок в области компьютерной инженерии, и в настоящее время он заканчивает свою стажировку по фронт-энд разработке. Он изучил как CSS-Grid, так и Flexbox, но столкнулся с ситуацией, которую я часто вижу. Он не может решить, когда использовать Grid, а когда Flexbox. Например, он использовал CSS-Grid для разметки заголовка веб-сайта и отметил, что процесс не был гладким, когда он работал с grid-column.

Читать далее

Верстка \ CSS 3

Единицы измерения CSS на основе области просмотра

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

Читать далее

Верстка \ CSS 3

Крутые трюки CSS Grid для вашего блога

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

Читать далее

Верстка \ CSS 3

Как использовать grid-template-area для изменения порядка элементов

От автора: работая над сайтом FordLabs, мы с моим напарником столкнулись с, казалось бы, сложной ситуацией. У нас было три элемента, которые нужно было расположить горизонтально в порядке [1] [2] [3] на экранах планшетов и на настольных компьютерах, но затем расположить вертикально в порядке [1] [3] [2] на мобильных устройствах.

Читать далее

Верстка \ CSS 3

Вот что я не знал о «content»

От автора: несколько недель назад Стефан опубликовал на своем веб-сайте пост под названием Свойство CSS «content» принимает альтернативный текст, что поразило меня. Он показал, что свойство content принимает 2 значения, а не только 1, фактическое содержимое и альтернативный текст.

Читать далее