[Перевод] CSS-функции min(), max() и clamp()

[Перевод] CSS-функции min(), max() и clamp()

Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности…

Подробнее
Немного о Neutralino.js

Немного о Neutralino.js

Что такое Neutralino.js? Данная технология представляет из себя достаточно интересный аналог устоявшихся на данный момент Electron и NodeWebkit. Чем же оно отлично от вышеприведённых технологических решений? Если верить заявлениям предоставленным в официальной документации, то отлична сама используемая архитектура построения приложения, которая позволяет создавать кроссплатформенные приложения на веб-технологиях с достаточно малым размером конечного билда. Читать дальше →

Подробнее
Дорогая цена стилей. Доклад Яндекса

Дорогая цена стилей. Доклад Яндекса

Загрузка CSS на страницу — блокирующая операция. Если асинхронная загрузка JavaScript может быть незаметна пользователю, то медленное появление стилей может прогнать нетерпеливого гостя с сайта. Как загружать CSS максимально производительно и незаметно для пользователей? Разобраться пробует Никита Дубко DarkMeFoDy из группы поисковых интерфейсов Яндекса в Минске. — Всем привет. Расскажу про стили. Все сегодня говорят про TypeScript да TypeScript. А я про Cascade style script буду…

Подробнее
Кастомный скроллбар в Angular

Кастомный скроллбар в Angular

После вступления Edge в доблестные ряды Chromium-браузеров кастомизация скроллбаров через CSS отсутствует только в Firefox. Это здорово, но кроме Firefox у CSS-решения есть масса ограничений. Посмотрите, какую черную магию приходится применять для плавного исчезновения. Чтобы получить полный контроль над внешним видом, по-прежнему нужно прибегать к JavaScript. Давайте разберемся, как это по-хорошему сделать через компонент Angular. Читать дальше →

Подробнее
Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями

Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями

Адаптивный или отзывчивый шрифт — это мечта любого веб-разработчика. Я пересмотрел множество вариантов реализации, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться. Бонус SCSS миксин! Читать дальше →

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №414 (4 — 10 мая 2020)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №414 (4 — 10 мая 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →

Подробнее
[Перевод] Понимание CSS Grid (3 часть): Grid-области

[Перевод] Понимание CSS Grid (3 часть): Grid-области

Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Grid Template Areas» автора Rachel Andrew При использовании CSS Grid, вы можете располагать элементы на сетке, указывая начальную и конечную grid-линии. Однако, существует и другой, более наглядный способ описания разметки. В этой статье мы узнаем, как использовать свойство grid-template-areas для размещения элементов на сетке и выясним, как оно в действительности работает. Читать дальше →

Подробнее
[Перевод] Понимание CSS Grid (2 часть): Grid-линии

[Перевод] Понимание CSS Grid (2 часть): Grid-линии

Перевод Understanding CSS Grid: Grid Lines» Rachel Andrew В первой статье из серии "Понимание CSS Grid" мы рассмотрели, как создавать родительский grid-контейнер и различные свойства, применяемые к данному элементу. Когда сетка создана, в нашем распоряжении оказывается набор grid-линий. В этой статье вы узнаете, как располагать элементы вдоль данных линий путём добавления свойств к дочерним элементам grid-контейнера. Мы охватим следующие моменты: Свойства размещения…

Подробнее
[Перевод] Выделение и CSS

[Перевод] Выделение и CSS

Навык выделения текста и других объектов сформировался у пользователей компьютеров много лет назад. Мы выделяем содержимое веб-страниц по разным причинам. Возможно, нужно скопировать текст и где-то его процитировать, возможно — кому-то просто легче читать текст, выделяя его фрагменты. На мобильных устройствах, правда, выделять что-либо сложнее. Меня, например, это раздражает. Мне не нравится выделять содержимое веб-страниц на телефоне. Эта операция кажется какой-то «неправильной». В этом…

Подробнее
Дайджест свежих материалов из мира фронтенда за последнюю неделю №413 (27 апреля — 3 мая 2020)

Дайджест свежих материалов из мира фронтенда за последнюю неделю №413 (27 апреля — 3 мая 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →

Подробнее
[Из песочницы] Как подружить Electron и Webix

[Из песочницы] Как подружить Electron и Webix

Введение Доброе время суток! Хотелось поделиться с Вами личным опытом создания десктопного приложения на JavaScript с использованием связки Electron и Webix. Такая связка позволяет ускорить процесс верстки интерфейса, особо не тратя время на разметку и прочие web штуки, которыми может заняться как раз фреймворк Webix. Инструменты Итак приступим, на понадобится следующие инструменты: Редактор, в котором мы будем писать непосредственно наш код. Я буду использовать visual studio…

Подробнее
Мои любимые вопросы о CSS с детальными ответами

Мои любимые вопросы о CSS с детальными ответами

Я проходил множество интервью, и когда дело доходило до вопросов о CSS, то они сводились к: "Перечислите все известные способы центрирования элемента". После 5 ответов, откровенно, это надоело. Поэтому я хочу поделиться своими любимыми вопросами о CSS, которые я задаю на интервью. Читать дальше →

Подробнее