CSS-live.ru

CSS

Сторонний CSS небезопасен

5

Перевод статьи Third party CSS is not safe с сайта jakearchibald.com, опубликовано на css-live.ru с разрешения автора — Джейка Арчибальда.

Несколько дней назад немало шума наделал «кейлоггер», написанный на CSS.

Одни требовали, чтобы браузеры это «починили». Другие вникли чуть поглубже и заметили, что уязвимость коснулась лишь сайтов, написанных на фреймворках типа Реакта — мол, это Реакт виноват. Но на самом деле проблема в том, что сторонний контент считают «безопасным».

Отзывчивые компоненты: решение проблемы выражений от контейнера

0

Перевод статьи Responsive Components: a Solution to the Container Queries Problem  с сайта philipwalton.com, опубликовано на css-live.ru с разрешения автора — Филипа Уолтона.

Выражения от контейнера (Container queries) — предложение, которое позволило бы веб-разработчикам оформлять DOM-элементы в зависимости от размера содержащего их элемента, а не окна браузера.

Как использовать вариативные шрифты в реальном мире

0

Перевод статьи How to use variable fonts in the real world с сайта clearleft.com для CSS-live.ru, с разрешения автора — Ричарда Раттера

Использовать вариативные шрифты в реальном мире не так-то легко, как оказалось. Эта статья поясняет, как мы справились с этим на новом сайте Ampersand и что мы узнали за это время.

Вариативный шрифт — один файл шрифта, который умеет вести себя, как много разных (более развёрнуто об этом можете прочитать в отрывке моей книги «Веб-типографика»). Уже немало сайтов продемонстрировали возможности вариативных шрифтов и самой технологии управления шрифтом в их основе, но для нового сайта конференции Ampersand я хотел показать, как вариативные шрифты используются на реальном сайте. Возможно, это будет первый коммерческий сайт, который когда-либо сделал это.

Как использовать свойство order во флексбоксах, не вызывая хаоса

0

Перевод статьи Avoiding chaos when using Flexbox ‘order’ для css-live.ru, с разрешения автора — Амелии Беллами-Ройдз

Недавняя твиттерная суматоха вынудила меня сделать наконец демо с флексбоксами, которое я хотела создать еще с тех пор, как впервые начала экспериментировать с flex-свойствами CSS.

Рома Комаров поделился исследованием, как с помощью флексбоксов и CSS-свойства order получить эффект сортировки таблицы на чистом CSS. Другие CSS-эксперты тотчас выступили с предупреждением, что такой подход не рекомендуется, а то и вовсе прямо противоречит спецификации.

Рома принял критику и добавил в статью предостережение: это лишь эксперимент, не пытайтесь повторить это в продакшне! Но в твиттерном обсуждении люди задавали вопрос, всплывающий снова и снова:

CSS-гриды + CSS-колонки = ♥

4

Перевод статьи CSS Grid + CSS Multi-Columns = ♥ с сайта medium.com для CSS-live.ru, автор — Патрик Броссет

В этой короткой статье я рассматриваю связь между двумя раскладочными инструментами из CSS: CSS-гриды и CSS-колонки.

Эти два инструмента можно использовать вместе весьма интересными способами для построения отзывчивых веб-дизайнов.

Начнём с обзора, что каждый из их делает.

Ссылки против кнопок в современных веб-приложениях

2

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон

Кнопки в интерфейсе Github
Github: ссылки или кнопки?

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

Снова о CSS Box Alignment (свойствах для выравнивания всего): простая шпаргалка

5

Спецификация CSS Box Alignment становится всё более зрелой, и кроме шпаргалки по выравниванию блоков Рейчел Эндрю и нашего обзора свойств для выравнивания всего в сети появляются новые материалы о ней. Пожалуй, пришла пора и нам освежить знания об этих свойствах.

<i is="морж">

3

Перевод статьи <i is="the walrus"> с сайта bkardell.com для CSS-live.ru, автор — Брайан Карделл

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

«Запашки» CSS-кода

4

Перевод статьи CSS Code Smells с сайта css-tricks.com для CSS-live.ru, автор — Робин Рендл

Каждую неделю (или вроде того) мы публикуем рассылку, содержащую актуальные ссылки, советы и трюки по веб-дизайну и разработке. В конце мы обычно описываем изученное за неделю. Это необязательно напрямую связано с CSS или фронтенд-разработкой, но там всегда есть чем поделиться. Данный пример — один из таких разделов рассылки, в котором я расскажу о качестве кода, и то, что, на мой взгляд, должно считаться «запашком» CSS-кода.

Многие разработчики жалуются на CSS. Этот каскад! Эти непонятные названия свойств! Вертикальное выравнивание! В языке есть много странных вещей, особенно если вы лучше знакомы с языками программирования вроде JavaScript,  Ruby, и пр.

Понимание вьюпорта WebView в iOS 11

2

Перевод статьи Understanding the WebView Viewport in iOS 11 с сайта ayogo.com для CSS-live.ru, автор — Дэррил Пог

Понимание вьюпорта WebView в iOS 11

iOS 11 представила новое, — пожалуй, неинтуитивное — поведение, связанное со статус-баром. Оно имеет особое значение для тех, кто разрабатывает приложения при помощи инструментов вроде Apache Cordova и Ionic. В частности, изменение затрагивает веб-приложения под iOS11, использующие фиксированное позиционирование верхней панели навигации. Эта статья поможет понять вьюпорт WebView в iOS 11.

Примечание: уже существующие приложения продолжат работать так, как всегда работали — без изменений в поведении их вьюпорта. Нововведение затрагивает только приложения, скомпилированные при помощи Xcode 9 и предназначенные для iOS 11.

Ну что, можно уже использовать CSS-переменные?

10

Перевод статьи So, Can We Use CSS Variables Yet? с сайта webdesignerdepot.com для CSS-live.ru, автор — Адам Хьюз

Весь этот шум вокруг CSS-гридов в последнее время заставил меня задуматься: какие ещё потрясающие CSS-фичи доступны нам сегодня?

CSS-переменные уже давно были у меня на слуху, и это добавляет целый новый набор инструментов и способ мышления во фронтенд-разработку, что меня сильно радует.

Веб-компоненты: долгая игра

9

Перевод статьи Web Components: The Long Game с сайта infrequently.org для CSS-live.ru, автор — Алекс Рассел

На прошлой неделе Майкл Роджерс выступил с докладом про веб-компоненты, который меня удивил, но его запись в блоге по следам этого доклада — толковый и своевременный материал для чтения.

Начиная проект, в котором возникли и много лет дорабатывались веб-компоненты, Дмитрий Глазков, Алекс Комороске и я ставили перед собой несколько главных целей: