Статьи по CSS

На 100% правильный способ делать контрольные точки в CSS

Перевод статьи The 100% correct way to do CSS breakpoints для CSS-live.ru, автор — Дэвид Гилбертсон

Постарайтесь на пару минут забыть про CSS. Не думайте о веб-разработке. Забудьте про цифровые пользовательские интерфейсы.

А когда вы забудете про всё это, хочу, чтоб ваше сознание отправилось в путешествие. В путешествие в прошлое. Назад в детство. В первый ваш день в школе.

(далее…)

Еще раз про border-image

Хотя свойство border-image уже поддерживают более 96% браузеров (с оговорками, но всё же), популярным пока его не назовешь. Пожалуй, поначалу оно кажется неоправданно сложным: объединяет в себе 5 отдельных свойств, каждое с несколькими значениями, да еще неочевидные правила взаимодействия с обычным border — легко запутаться. Даже многие неплохие руководства (типа статьи Дадли Стори, которую мы переводили в прошлом году) грешат тем, что даже после них ощущение сложности не проходит.

Есть мнение, что его сложность преувеличена, а возможности недооценены. Попробуем исправить это упущение.

(далее…)

Псевдоэлементы, которых не может быть

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

(далее…)

Свойство background-clip и его применения

Перевод статьи The `background-clip` Property and its Use Cases с сайта css-tricks.com, переведено для css-live.ru с разрешения автора — Аны Тюдор.

background-clip — одно из тех свойств, о которых я давно знала, но почти не использовала. Может, лишь пару раз в ответах на Stack Overflow. До прошлого года, когда я начала создавать эту огромную коллекцию ползунковых регуляторов (слайдеров). Некоторые дизайны, что я решила воспроизвести, были довольно-таки сложны, а мне на каждый ползунок отводился один-единственный элемент, и им как назло оказался input, к которому даже псевдоэлементов толком не добавить. Хоть в некоторых браузерах такое и работает, то, что оно работает — на самом деле баг, и мне не хотелось на это полагаться. Так что в итоге мне пришлось использовать фоны, рамки и тени в изобилии. И я многому научилась при этом, и в этой статье делюсь некоторыми их тех уроков.

Первым делом давайте посмотрим, что такое background-clip и что оно делает.

(далее…)

Вверх по водопаду: задачка для CSS-супергероя

Настоящего героя, владеющего суперсилой CSS-спецификаций, трудно сбить с толку. Но в жизни, как и в супергеройском кино, попадаются задачи, на первый взгляд неразрешимые. Например: есть страничка, которую кто-то нехороший собирается через 5 секунд погрузить во тьму, установив ей style="background:#000 !important" на body. Нужно «спасти» страничку, сохранив ее в читаемом виде, с белым фоном… ну хотя бы минут десять. Хотя бы в новейших браузерах.

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

See the Pen MaxvxJ by Ilya Streltsyn (@SelenIT) on CodePen.

Инлайновый стиль, да еще и с !important. Абсолютное оружие. В известной визуализации «SpeciFISHity» авторства Эстель Вайл (Стандартисты) — атомная бомба. Казалось бы, что можно ему противопоставить?

(далее…)

Когда флексбоксы не всесильны, или сюрприз тёмной стороны CSS

Сегодня, когда флексбоксы поддерживаются в 93% браузеров, многие видят в них панацею для верстки. И неспроста: это первый модуль CSS специально для раскладки блоков, многие когда-то сложные задачи с ним решаются буквально парой строчек. Есть даже целая галерея таких решений (ее автор Филип Уолтон знаком нам по систематизации браузерных багов с флексбоксами). Кажется, что этой новой чудесной технологии подвластно всё. Так что легко понять недавнее удивление известного веб-дизайнера, разработчика и популяризатора Уэса Боса в твиттере:

Неужели это невозможно с флексбоксами? Как мне заставить флекс-элементы растягиваться, но выравнивать свой контент по вертикали? Вот код:

Казалось бы, элементарная задача. Всего одна строка флекс-элементов, в самих элементах ничего хитрого, обычное строчное содержимое. И по отдельности требования Уэса реализуются проще некуда. Вертикальное центрирование — одной строчкой кода: align-items:center. Растягивание блоков до одинаковой высоты — вообще без кода, это делает значение align-items:stretch по умолчанию. Одна проблема — свойство принимает лишь одно значение.

В длинном обсуждении твита решения так и не нашлось.

(далее…)

Жизнь после CSS3: что нового в CSS… 1?

Будущее настало незаметно

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

(далее…)

Разбираемся с border-image из CSS3

Перевод статьи CSS3 Border-Image Explained с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Одно из самых мощных новых свойств CSS, border-image, которое к тому же ещё и имеет шикарную поддержку, за исключением (а теперь все вместе!) IE10 и более ранних версий. Но, к сожалению, также является одним из самых непонятных и сложных для понимания свойств.

283x340xborder-image-slices.png.pagespeed.ic.t1Izk-Rh7r

(далее…)

Быстрая загрузка веб-шрифтов на адаптивных сайтах

Давным-давно каждый сайт использовал для отображения текста только такие шрифты, как Arial, Verdana, Garamond или Times New Roman, потому что только эти шрифты наверняка были установлены почти на любом компьютере. Но эти времена позади. Веб-шрифты распространяются по всему интернету, но мы все еще толком не знаем, как загружать их эффективнее.

pagespeed99

Эта статья – моё простое руководство о том, что делать, чтобы предложить оптимальный пользовательский опыт без необходимости избегать «дорогих украшений» (ака веб-шрифтов)

0. Если лень читать полностью

Суть метода:

  1. Используем шрифты только в формате woff
  2. Другие браузеры получает старые «безопасные» шрифты
  3. Загружаем шрифт в бинарном формате и оптимизируем его
  4. Отдаем шрифты сами
  5. Отдаем их в качестве CSS-файловURIs с закодированными в base64 данными
  6. Если у пользователя нет шрифта, загружаем его асинхронно и сохраняем в localStorage
  7. Иначе загружаем его из localStorage без обращения к серверу.
  8. Радуемся, потому что ваш сайт отображается намного быстрее, а ваши пользователи получают намного больше удобства

Для тех, кто всё ещё читает, вот мои разъяснения, насчет верхних пунктов.

(далее…)

Идеальная ширина столбца для веба

Недавно я создал инструмент, который может помочь вам установить идеальную длину  строки текста на веб-странице. Вы можете регулировать несколько таких переменных, как font-family и язык. При перемещении ползунка можно увидеть, какое  количество слов или символов находится в строке. Теперь вы можете выбрать идеальный размер, основываясь на той теории, которая вам больше нравится (10 слов или что-нибудь между 45 и 75 символов). Согласно мнению типографа Роберта Брингхёрста это самый лёгкий способ определить идеальный размер.

(далее…)

Шпаргалка по шпаргалке по Flexbox

Хотя я и не новичок в магии Flexbox, я понимаю, что пока ещё не использую её очень часто. Как результат, в конечном итоге я останавливаюсь и возвращаюсь к этой статье на CSS-Tricks, всякий раз, когда появляется возможность использовать силу Flexbox.

Я задалась целью создать наглядный материал, чтобы быстро получать краткую справку по Flexbox, когда я буду натыкаться на такие моменты неясности в будущем. Мне нравится думать об этом, как о маленькой диаграмме (блок-схеме? чем-то вроде дерева решений?), которая является шпаргалкой… основанной на шпаргалке.

(далее…)

Список псевдоэлементов для стилизации элементов управления формы

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

Несмотря на то, что все эти псевдоэлементы специфичны для каждого браузерного движка (и поэтому требуют браузерных префиксов), они всё равно могут быть полезными для кастомизации отображения в каждом из них. Эта статья – моя лучшая попытка составить полный список псевдоэлементов, доступных в движках Trident, Gecko, и WebKit. На момент написания этой статьи движок Blink с недавних пор является ответвлением WebKit, так что псевдоэлементы в них идентичны. Я не в курсе на счёт псевдоэлементов, которые поддерживает Presto.

(далее…)

Руководство по внедрению CSS-колонок в адаптивный дизайн

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

С помощью колонок CSS вы можете создавать макеты в стиле журнальной верстки с небольшим добавлением разметки, которая будет адаптироваться к любой, даже к не фиксированной ширине. Браузеры, которые поддерживают CSS-columns, сделают нужные расчеты, чтобы вписать и распределить содержимое по аккуратным колонкам. Если вы уже работаете с резиновым макетом, то колонки в этом случае будут подстраиваться автоматически. С правильной комбинацией свойств, колонки CSS являются интересным вариантом для создания макета, который может быть отзывчивым и поддерживает изящную деградацию.

(далее…)

Поведение курсора при наведении на текст

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

(далее…)