CSS-live.ru

Максим Усачев: статьи и переводы

Лучший способ реализовать «обёртки» в CSS

4

Перевод статьи The Best Way to Implement a “Wrapper” in CSS с сайта css-tricks.com для CSS-live.ru, автор — Калоян Косев

Иногда первое, что мы пишем на странице — это элемент, оборачивающий всё остальное на странице. Термин «Обёртка» типичен для этого. Мы задаём ему класс, отвечающий за инкапсуляцию всех визуальных элементов на странице.

Я всегда боролся за то, чтобы найти лучший способ реализовать его. Я нашёл соответствующую тему на StackOverflow с более чем 250000 просмотров, что говорит о её огромной популярности. В этой статье я подытожу свои мысли.

Перед тем, как пойти дальше, сначала рассмотрим разницу между «обёрткой» (wrapper) и «контейнером» (container).

«Обёртка» против «Контейнера»

Я вижу разницу между элементом-обёрткой и элементом-контейнером.

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

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

От 0 до джуниора за месяц — онлайн-интенсив «Базовый HTML и CSS»

0

Что такое интенсив в HTML Academy

Это пять недель плотной работы: вёрстка учебного и личного проектов, еженедельные лекции, пять часов консультаций с наставником, подготовка проекта к финальной защите. Таким образом, формат учёбы максимально приближен к рабочему процессу в крупной IT-компании: настоящие дизайн-макеты, техническое задание, ревью от старшего разработчика и горящие сроки.

Курс рассчитан на тех кто только знакомится с вёрсткой, начинающих верстальщиков и тех, кто нуждается в систематизации своих навыков.

Всего интенсив состоит из десяти вебинаров, их ведут четыре опытных преподавателя-разработчика.

Сентябрь уже подходит к концу

0

В честь начала осени действуют акции на курсы HTML Academy и ещё можно успеть ими воспользоваться до 1 октября.

Пройти бесплатно курс «Анимация»

В формате интерактивной игры можно изучить основы анимации на CSS. Предстоит пройти путь развития цивилизации, покорить космический простор и в финале запустить ракету на Луну.

animate

Эпичный курс «Великий Кексби» — настоящая вёрстка

0

Интерактивные курсы помогают познакомиться с синтаксисом и особенностями HTML и CSS, но как новичку перейти от них к вёрстке первого сайта? Для этого был создан эпичный курс «Великий Кексби», доступный по подписке.

Что такое эпичный курс

В отличие от остальной программы, здесь перед учеником ставится полноценная задача: сверстать главную страницу интернет-магазина кошачьих аксессуаров «The Great Keksby».

Keksby1

Вначале он получает макет в формате изображения и описание задачи — дальше начинается работа, поделённая на одиннадцать этапов.

Задания построены аналогично остальным: требуется дописать или исправить код, выполняя поставленные цели. Любые изменения в редакторе будут сразу отображаться в мини-браузере.

Каждый раздел привязан к курсу основной программы. Поэтому вначале придётся пройти основы, чтобы после применить полученные знания на вёрстке интернет-магазина.

Интерактивные курсы HTML Academy — быстрый старт для новичка

2

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

Начать изучать HTML и CSS по курсам может человек с любым уровнем знаний и образованием, нет никаких ограничений. Сейчас в программе доступно девятьсот шестьдесят пять заданий и испытаний, более трёхсот из них можно пройти бесплатно, периодически появляются новые.

Похожие сайты

Что может поломать макет на гридах (CSS Grid Layout)

3

Перевод статьи BREAKING THE GRID с сайта daverupert.com для CSS-live.ru, автор — Дейв Руперт

Два способа поломать CSS-гриды, и как их починить

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

В итоге я нашёл два способа поломать CSS-гриды. Как это бывает, я умудрился в одной раскладке сделать и то, и другое. 

Изучаем CSS-гриды

1

Перевод статьи Learning CSS Grids с сайта varun.ca для CSS-live.ru, автор — Варун Вачхар

+-------------------------+ +---+
|                         | |   |
|  CSS Grid               | |   |
|  Layout Module          | |   |
|                         | |   |
+-------------------------+ |   |
+----+ +------------------+ |   |
|    | |                  | |   |
|    | |                  | |   |
|    | +------------------+ +---+
|    | +------+ +---------------+
|    | |      | |               |
+----+ +------+ +---------------+

CSS-гриды пришли! С марта 2017-го их поддерживают все основные браузеры. В свете этой хорошей новости я решил выкроить немного времени, чтобы лучше понять, как их использовать. Изучение далось мне ощутимо тяжелее, чем я рассчитывал — модуль CSS Grid Layout вводит порядка 17 новых понятий. Пытаться охватить их все было как-то слишком, так что я стал дробить материал на части, поясняя их заметками и примерами, которыми я и собираюсь поделиться. Это ни в коей мере не исчерпывающее руководство. Возможно, оно даже не на 100% фактически верно. Но оно должно дать достаточно информации, чтобы сложить в уме схему, как работают CSS-гриды, и начать верстать на них.

Полный контроль над контрольными точками. В CSS и в JS

28

Всем привет! Недавно меня поругали за то, что для гарантии адаптивности вёрстки я применяю дополнительный класс .js-adaptive, который я вешаю на элемент body с помощью JavaScript. К примеру, при ширине экрана 600px и ниже класс .js-adaptive вешается на body, а при ширине 601px и выше этот класс с body убирается. В самих стилях при ширине экрана 600px и ниже я делаю адаптивность вот так:

.block-container {
	display: block // при ширире больше 600px включаем display: block для .block-container 
}
.js-adaptive .block-container {
	display: flex // при ширине меньше 600px включаем display: flex для .block-container 
}

Здесь вырисовывается явный минус. В адаптивном режиме у нас появляется дополнительный класс .js-adaptive перед всеми селекторами, из-за чего повышается специфичность. Любителям БЭМа такое вряд ли понравится, да и вообще, не очень-то это и хороший подход на самом деле, тем более, что для таких целей у нас есть медиавыражения в CSS.

Знакомство с CSS Grid Layout

15

Перевод статьи Getting to know CSS Grid Layout с сайта cm.engineering для CSS-live.ru, автор — Крис Райт

ciu-grid

Фотографии из  Unsplash

CSS Grid — важнейшее событие для веб-раскладки, что случалось в браузерах со времен флексбоксов. Он позволяет избежать всяких магических чисел, хаков и обходных путей, к которым мы привыкли за последние 15 лет. С ним стало намного проще описывать раскладки, что здорово урежет нишу большинства ведущих CSS-фреймворков и позволит писать меньше стилей.

Если не знакомы с CSS Grid и дочитали аж досюда, то это инструмент для раскладки, применяемый к контейнеру, который затем управляет размещением, размерами и выравниванием дочерних элементов.

CSS Grid предоставляет новые мощные возможности — с ними раскладка учитывает горизонтальное и вертикальное пространство одновременно, можно смело изменять раскладку, не затрагивая разметку, и не нужно медиазапросов, чтобы адаптироваться к свободному пространству.

Как грид-раскладка (Grid Layout) провела лето

7

Перевод статьи Grid Layout Summertime с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Краткое описание изменений в реализации CSS Grid Layout за прошедшее лето

Лето закончилось, и команда Igalia успела не только хорошо отдохнуть, но и продуктивно поработать над CSS Grid Layout в Chromium/Blink и Safari/WebKit в рамках нашего постоянного сотрудничества с Bloomberg.

К концу сентября спецификация перешла в статус «Кандидат в рекомендации (CR)», Рэйчел Эндрю объяснила, что это значит, в своей статье. Однако, за прошедшие месяцы кое-где произошло несколько изменений, требующих обновления реализации.

Если не забыли моё выступление на последнем BlinkOn, мы рассматривали статус реализации. К тому времени накопилось куча вещей, помеченные как WIP (сокращение от Work In Progress, т.е. «Мы работаем над этим» — прим. перев.) или TODO («надо сделать», напоминания на будущее — прим. перев.), но теперь большинство из них уже реализованы, как я поясню в статье.

Математика CSS-шлюзов

7

Перевод статьи The math of CSS locks с сайта fvsch.com для CSS-live.ru, автор — Флоран Вершельд

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

Эту идею, вместе с одной из реализаций, предложил Тим Браун в статье «Гибкая типографика с помощью CSS-шлюзов»

Когда я вникал в реализацию Тима и пробовал свои варианты, мне было нелегко разобраться, что именно там происходит. По ходу дела я набросал кучу формул, и решил, что будет полезно поделиться пояснением математической части.

Я опишу сам приём, его ограничения, и математику, на которой он строится. Но не пугайтесь насчет математики: по сути это сложение и умножение, к тому же я расписал всё по шагам подробнее некуда, а еще будут симпатичные графики.

Полезные соображения насчет курсоров по умолчанию

6

Перевод статьи Some pointers on default cursors с сайта hiddedevries.nl, опубликовано на css-live.ru с разрешения автора — Хидде де Вриса

Порой в проекте возникает вопрос, должны ли курсоры для кнопок быть в виде пальца или по умолчанию. Спецификация за вариант по умолчанию, но многие (да и я сам до недавнего времени) этого не знают. Многие дизайнеры, с которыми я работал, хотят курсор-указатель независимо от предписания спецификации.

Это не пустяк: ссылки (<a/>) ведут куда-то ещё, кнопки — (<button>-ы) выполняют действия. «Палец» указывает пользователю, что его курсор находится на ссылке, которая перенаправит его куда-то. Причем ее можно открыть в другой вкладке: скопировать ссылку, перетащить её в другое окно, и так далее. Другим интерактивным элементам на странице (к примеру, кнопкам) достанется курсор по умолчанию. Краткая выжимка: палец не означает кликабельность.

Взаимодействие между Javascript и CSS с помощью CSS-переменных

7

Перевод статьи Communicating Between JavaScript and CSS Using CSS Variables с сайта eager.io, опубликовано на css-live.ru с разрешения автора — Зака Блума

На 2016 г. CSS-переменные полностью работоспособны в Chrome и Firefox, у IE тоже в планах реализовать их.

Как часто бывает с новинками JavaScript и CSS, не сразу удается представить себе, для чего CSS-переменные могут пригодиться. Для большинства из нас эти переменные — что-то новое и непривычное, так что не всегда очевидно, к чему их применить. Но мы нашли замечательный ответ — взаимодействие между Javascript и CSS.

Что такое CSS-переменные?

CSS-изоляция

12

Перевод статьи CSS containment с сайта justmarkup.com, опубликовано на css-live.ru с разрешения автора — Майкла Шарналя

Я узнал про свойство contain всего несколько недель назад, когда в ответ на мой вопрос в твиттере о применениях медиазапросов для контейнера Дэвид Бэрон упомянул его, сказав, что с contain: strict; можно избежать множества теоретических проблем с медиазапросами для контейнера. С тех пор я читаю спецификацию, пытаясь понять это свойство, и вот что мне удалось выяснить.

Исчерпывающее руководство по стратегиям загрузки веб-шрифтов

12

Перевод статьи A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES с сайта zachleat.com, опубликовано на css-live.ru с разрешения автора — Зака Лезермана

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

Прим. перев.: в названиях методов Зак использует труднопереводимые сокращения FOIT, FOUT и FOFT:

  • FOIT (Flash of Invisible Text) — букв. «мелькание невидимого текста», когда во время загрузки веб-шрифта текст не отображается вообще;
  • FOUT (Flash of Unstyled Text) — букв. «мелькание неоформленного текста», когда во время загрузки веб-шрифта текст отображается шрифтом по умолчанию (напр. системным);
  • FOFT (Flash of Faux Text) — букв. «мелькание синтезированного текста», когда в промежутке между загрузкой основного веб-шрифта и его вариаций (жирный, курсив и т.д.) вместо этих вариаций браузер отображает особым образом измененный основной шрифт (так называемый «ложный жирный» и «ложный курсив», чуть подробнее о них здесь).

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

Перейти к: