Category: CSS

20
Авг
2019

Почему вы обязательно должны научиться использовать CSS-in-JS

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

19
Авг
2019

Работа с несколькими столбцами — CSS Multi-column Layout

От автора: несмотря на то, что он предшествовал Grid and Flexbox, Multi-column Layout в CSS представляет собой — по крайней мере, для меня — еще более радикальный отход от того, что мы обычно делаем, и как думаем о макете CSS. Разделение только одного элемента на его многоколоночное представление содержимого кажется странным, даже еретическим. Установка многостолбцового […]

16
Авг
2019

Естественно адаптивная сетка CSS с помощью minmax() и min()

От автора: CSS Grid в настоящее время широко поддерживается в современных браузерах, и многие люди отлично пользуются этим! Но, к сожалению, одна из самых полезных функций спецификации не работает так, как заявляется. В частности, невозможно создать «естественно адаптивную сетку» CSS, то есть сетку, которая реагирует на размер своего контейнера без использования медиазапросов. Но благодаря определенным […]

15
Авг
2019

Использование пользовательских атрибутов CSS, сгенерированных JavaScript, в качестве механизма передачи

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

14
Авг
2019

Самый простой способ асинхронной загрузки CSS

От автора: одной из наиболее эффективных вещей, которые мы можем сделать для повышения производительности и устойчивости страниц, является загрузка CSS способом, который не задерживает рендеринг страниц. Это связано с тем, что по умолчанию браузеры загружают внешний CSS-файл синхронно — блокируя весь рендеринг страницы, пока CSS-файл загружается и анализируется — и то, и другое вызывает потенциальные […]

13
Авг
2019

Как добавить резервный Flexbox вариант для CSS Grid

От автора: в предыдущей статье я рассказал о том, как с помощью CSS Grid создать календарь. Сегодня я хочу поделиться тем, как создать для CSS Grid резервный Flexbox вариант для того же календаря. Как обеспечить поддержку В целом, есть три способа обеспечить поддержку, когда дело доходит до CSS. Первый способ: написать резервный код. Переопределить резервный […]

12
Авг
2019

Flexbox и отступы: примеры работы

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

08
Авг
2019

Пользовательские CSS-атрибуты как механизм передачи данных из JavaScript в CSS

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

06
Авг
2019

Фантастические веб-спецификации и где они обитают

Многие разработчики, что уж скрывать, недолюбливают спецификации. Одни считают их скучными. Другим они вообще кажутся монстрами, не иначе как порожденными мифической Ехидной (невероятно, но это отчасти правда: именно так — Echidna — называется система автопубликации, используемая в W3C).

31
Июл
2019

Flexbox justify-content: полное руководство по центрированию

От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать […]

30
Июл
2019

18–21 сентября, Минск: конференция CSS-Minsk-JS 2019

Участников конференции по фронтенду ждёт два дня докладов и четыре воркшопа, общение и обмен опытом со специалистами со всего мира.
— Читать дальше «Конференция CSS-Minsk-JS 2019»

29
Июл
2019

Добавление крутых эффектов с помощью режимов наложения CSS

От автора: в последние годы веб-дизайн, особенно CSS, приобрели предсказуемый характер. Во-первых, мы создаем специальные эффекты, которые интенсивно используют изображения, внешние библиотеки или и то, и другое. Затем приходит CSS и добавляет эти возможности — значительно сокращая потребность во внешних ресурсах. Это означает, что большая часть скрытой мощности, которая нам нужна, просто встроена в браузер. […]

25
Июл
2019

Добавление / удаление класса при наведении JS

Очень часто разработчикам нужно при наведении на элемент дописывать класс, что бы более гибко стилизовать какой то выпадающий элемент. Данный перемер будет работать во всех браузерах. Добавление / удаление класса при наведении также очень пригодится для iOS т.к. обычное css свойство hover там не работает. Также данный способ не только добавляет при наведении на элемент […]

Запись Добавление / удаление класса при наведении JS впервые появилась Di-Grand.

05
Июл
2019

Почему большинство разработчиков боятся CSS

От автора: как ни странно, многие боятся начинать работу с CSS. Сначала в моей команде было два фронт-энд разработчика. Это был я и старший фронт-энд разработчик. Затем старший фронт-энд разработчик уволился, и я остался единственным фронт-энд разработчиком в команде. И это было хорошо. Я делал свою работу, и все было в порядке. Мы провели несколько […]

04
Июл
2019

Как сделать таблицы адаптивными с CSS

От автора: я считаю, что необходимость создавать адаптивные макеты таблиц возникает гораздо чаще, чем ожидают большинство разработчиков. Часто реакцией на это является желание реализовать какую-то собственную систему координатной сетки или использовать предустановленную библиотеку. Не делайте этого – вы можете сделать таблицы адаптивными с помощью простого CSS. Моя недавняя статья на HackerNews Пишите HTML, как будто […]

03
Июл
2019

CSS эффект для лендинга. Эффект воды

От автора: в этом уроке вы найдете шикарный эффект для лендинга или любого другого сайта, который реализуется с помощью плагина jQuery Ripples. Буквально за несколько строк кода вы получите интересный эффект воды, точнее, эффект водной ряби, который привязан к движению и кликам мыши. Выглядит полученный эффект – великолепно и надолго задержит посетителей сайта, которые решат […]

30
Июн
2019

18 советов по CSS, которые сделают жизнь разработчика проще

Эта статья про преимущества и недостатки разных свойств элементов. В ней собран опыт очень долгой работы с CSS, который многому вас научит.
— Читать дальше «18 советов по CSS, которые сделают жизнь разработчика проще»

28
Июн
2019

CSS Grid Level 2 — subgrid вводится в Firefox

От автора: функция подсетки subgrid спецификации CSS Grid еще не реализована ни в одном браузере, но теперь она доступна для тестирования в Firefox Nightly. Это функция, которая, если вы использовали CSS Grid для макета любой сложности, скорее всего, вас очень порадует. В этой статье я собираюсь представить функцию и некоторые варианты ее использования. Так что […]

27
Июн
2019

Скролл для блока с плагином SimpleBar

От автора: в верстке частенько может возникать достаточно типовая задача: уместить в компактный небольшой блок большой объем данных. Реализовать эту задачу поможет CSS-свойство overflow. Однако, скроллы, создаваемые этим свойством для прокрутки внутреннего содержимого, выглядят так себе, хотелось бы их как-то оформить. Помочь с этим может замечательный плагин SimpleBar, использование которого вы и увидите в этом […]

26
Июн
2019

Архитектура CSS — структура папок и файлов

Прежде чем мы начнем, несколько слов о том, кто я. Меня зовут Элад Шехтер, и я работаю разработчиком 13 лет. Последние девять лет я работаю над архитектурой CSS / HTML. В этой статье я покажу мои рекомендации по определению архитектуры CSS, основанные на моем многолетнем опыте.

24
Июн
2019

Как правильно мыслить, чтобы писать CSS

От автора: о да, CSS. Не проходит и недели, чтобы на эту тему не разгорались жаркие онлайн-дискуссии. Это слишком сложно. Это слишком просто. Это непредсказуемо. Это устарело. Питер Гриффин борется со слепыми точками GIF. Я не знаю, почему CSS вызывает у разработчиков столько разных эмоций, но догадываюсь, почему иногда он может показаться нелогичным или разочаровывающим: […]

20
Июн
2019

Использование метода Grid Shepherd для упорядочивания данных с CSS

От автора: при работе с данными программисты часто не знают, правильно ли они отфильтрованы или отсортированы. Это особенно болезненно, когда вы перебираете массив, затем отображает данные на сайте, не зная местоположений каждого элемента, получающего их. Grid Shepherd — это метод, который помогает позиционировать и сортировать элементы там, где вы хотите, использовать CSS Grid вместо JavaScript. […]

20
Июн
2019

Переменные CSS: преимущества пользовательских свойств

От автора: Переменные CSS или «Пользовательские свойства CSS». Они позволяют работать с переменными непосредственно в CSS. Они очень полезны для уменьшения повторения в CSS, а также для создания мощных эффектов во время выполнения, таких как переключение тем. Они соответствуют принципу DRY — Don’t Repeat Yourself. С помощью переменных CSS вы можете локализовать значения и упростить начальную разработку, […]

15
Июн
2019

Анимированное руководство по CSS flex

Свойство CSS flex — это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

12
Июн
2019

26 июня, Москва: Panda Meetup #19 Frontend

Более 100 фронтенд-разработчиков, архитекторов и тимлидов из сильнейших команд соберутся, чтобы обсудить важнейшие вопросы современного фронтенда.
— Читать дальше «Panda Meetup #19 Frontend»

07
Июн
2019

10 экономящих время советов по CSS, которые я освоила при использовании Sass

От автора: эти 10 советов по работе с CSS помогут вам сэкономить время и лучше взаимодействовать с командой. Иногда мы думаем, что знаем все, что нам нужно знать о SCSS, и что мы можем уделить больше времени JavaScript. Мне жаль, что я говорю это, но вы должны уделять больше внимания таблицам стилей. Я работала в […]

05
Июн
2019

Трансформация кнопки гамбургера

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

03
Июн
2019

Функция CSS для усечения многострочного текста была реализована в Firefox

От автора: когда свойство -webkit-line-clamp применяется к блоку текста (например, абзацу), текст можно ограничить указанным количеством строк (1 или более), и в конец последней видимой строки добавить многоточие (…). Таким образом, вы можете с помощью CSS скрыть текст, выходящий за блок. [crayon-5cf4ba845b13a617976447/] Примечание. Убедитесь, что элемент не имеет (нижнего) отступа, чтобы не допускать визуализации текстовых […]