CSS *

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

В данной статье будет рассказана история одной мобильной игры разрабатываемой на HTML, CSS, JavaScript, jQuery, Apache Cordova и Firebase. Также будут освещены следующие вопросы:

- Стоит ли использовать jQuery?

- Стоит ли вообще разрабатывать мобильные игры на JS с нуля?

Привет, Хабр!

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

В частонсти, в статье рассмотрены следующие вопросы:

- Как сделать таблицу с фиксированной шапкой и скроллом в body?

- Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Как избежать использования overflow: 'scroll' в данной ситуации. Установка css-переменной scroll-width.

- Оптимизация и кастомизация скролла: плавность, scroll margin, изменение цвета и формы.

"Разработчик – это человек, который переводит мысли заказчика на язык машины"
@mikita_du

Идея статьи появилась год назад, думал назвать «Вёрстка в 2021», но как-то затянулось… Весной 2021 года Microsoft объявила, что с 15 июня 2022 года прекращается поддержка IE11 (да, не для всех версий Win 10, но всё же), а значит, к выходу статьи уже останется менее полугода до знаменательного события, когда не придётся верстать под IE.

Для меня же это значит, что можно будет по полной использовать новые стандарты браузеров, в частности – css-variables, grid layout.

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

Статья будет полезна и новичку, и специалисту с опытом. За подробностями приглашаем под кат, пока у нас начинается курс по Frontend-разработке.

CSS функция image-set поддерживается в браузерах на основе Chromium с 2012 года, а в Safari начиная с версии 6. Недавно поддержка появилась в Firefox 88. Давайте углубимся в эту тему и посмотрим, что мы можем и чего не можем делать с помощью функции image-set ()

Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь.Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу.

Самый простой вариант — вообще не подключать сторонние шрифты. Можно пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать. 

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

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

Итак, как же они устроены? Разумеется, можно открыть какой-то графический редактор и сделайте их, верно? Конечно, это круто. Но мы пишем здесь о CSS финтах, и было бы гораздо интереснее посмотреть на возможности, которые нам дают CSS и SVG - двух наших любимых ингредиентов!

У нас есть несколько способов сделать кляксы. Давай проверим их.

Недавно был опубликован черновик спецификации CSS Grid 3 уровня, в котором содержится описание способа создания Masonry-раскладки с помощью чистого CSS. В этой статье Rachel Andrew объясняет данную спецификацию с примерами, которые вы можете воспроизвести в браузере Firefox Nightly. И хотя данный функционал пока что нельзя использовать в реальных проектах, ваш отзыв может помочь убедиться, что текущая реализация соответствует или не соответствует требованиям разработчиков к этому типу раскладки.

$sizes: ("xs":320px, "sm":576px, "md":768px, "lg":992px, "xl":1200px);

@mixin media($minmax, $media) {
  @each $size, $resolution in $sizes {
    @if $media == $size {
      @media only screen and (#{$minmax}-width: $resolution) {
        @content;
      }
    }
  }
}

Приветствую. Представляю вашему вниманию перевод статьи «Keep the Footer at the Bottom: Flexbox vs. Grid», опубликованной 8 апреля 2020 года автором Stephanie Eckles

Это первая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

В течение многих лет я регулярно возвращалась к этой статье Matthew James Taylor за способом удержания футера страницы в нижней её части, даже если высота основного содержимого меньше высоты окна. Данный метод основывался на явном задании высоты футера, что являлось не масштабируемым, но очень хорошим решением (до появления Flexbox).

Перевод Understanding CSS Grid: Grid Lines» Rachel Andrew

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

Мы охватим следующие моменты:

1. Свойства размещения элементов grid-column-start, grid-column-end, grid-row-start, grid-row-end и их краткие формы записи grid-column and grid-row
2. Как использовать grid-area для размещения элементов по номерам grid-линий
3. Как располагать элементы с помощью именованных линий
4. Отличие в размещении элементов в явной и неявной сетке
5. Использование ключевого слова span с небольшим бонусом subgrid
6. Чего следует остерегаться при одновременном использовании ручного и автоматического размещения элементов