Cтатьи по тегу «CSS»

Перевод статьи Word Wrapping Woes  с сайта jonibologna.com, опубликовано на css-live.ru с разрешения автора — Джони Трайтел.

Почему-то мне как-то особенно «везет» на странные, неожиданные фокусы с переносом текста.

Я написала электронную книгу, и решать, как переносить строки кода в блоках — это был кошмар! Порой блок текста из-за переноса выбивался по высоте из контейнера. А одни слишком длинные ссылки чего стоили!

Вставлять дефис в месте переноса или нет? Здесь переносим, там не переносим. Тут вставляем дефис, там нет. Одно свойство ни в какую не хочет работать без другого. И почему этот горизонтальный скроллинг упорно не хочет пропадать?

/me бьется об стол

Подборка свежих эффектов, интересных идей и полезных наработок.

Вращающаяся галактика

Интерактивная 3D-модель галактики на WebGL. Автор: Atrahasis (@astrak)

See the Pen WebGL Galaxy by Atrahasis (@Astrak) on CodePen.

Посмотреть живой пример

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация текста на SVG

Красивая анимация SVG текста.

See the Pen Animated text with Snapsvg by yoksel (@yoksel) on CodePen.

Посмотреть живой пример

Перевод статьи A fictional conversation about progressive enhancement с сайта tommorris.org, с разрешения автора — Тома Морриса.

— Я разочаровался в современной веб-разработке. Кучи раздутых фреймворков, горы скриптов, одностраничных приложений, ссылок с #! — всё как-то переусложнено. Мы забыли старые приемы прогрессивного улушения, а взамен  получили жуткие нелепости вроде бесконечного скроллинга, которые прикольно выглядят, но проку для пользователя от них никакого. Мы будто заново изобрели эпоху флэш-заставок, но радуемся тому, что сделали весь этот бессмысленный хлам не на флэше, а на JavaScript.

Перевод статьи CSS element() function с сайта iamvdo.me, с разрешения автора — Венсана де Оливейры.

В июле я написал про продвинутые приемы работы с CSS-фильтрами, в частности, backdrop-filter и filter(). Сегодня я хочу поделиться намного более потрясающей возможностью CSS. Но прежде чем начать, хочу предупредить: она работает только в Firefox, другие браузеры пока не торопятся ее поддерживать. Может быть, скоро это изменится. Очень на это рассчитываю. Так что прочитайте и передайте другим.

Если вы читаете эту статью не в Firefox, наверное, вам стоит переключиться на него, чтобы увидеть примеры в действии. На всякий случай я добавил видео.

element()

Перевод статьи The ten commandments of sane style sheets с сайта benfrain.com, автор — Бен Фрейн.

Десять заповедей

1. Да будет у тебя единственное место в коде для каждого ключевого селектора
2. Не вкладывай (ежели не вкладываешь медиавыражений, переопределений, либо сие воистину необходимо)
3. Не используй селекторов по ID (даже ежели мнишь, что сие необходимо)
4. Не пиши браузерных префиксов в исходных файлах стилей
5. Используй переменные для размеров, цветов и z-индекса
6. Всегда первыми пиши правила для мобильных устройств (сторонись max-width)
7. Используй миксины для стеков шрифтов
8. Комментируй все магические числа и браузерные хаки
9. Не встраивай изображений в код
10. Не пиши сложного CSS там, где простой CSS достаточен

Блаженны соблюдающие сии правила, ибо они наследуют логичные таблицы стилей.

Аминь.

Перевод статьи CSS is Alive and Wells с сайта sitepoint.com, автор — Луис Лазарис

Растущая популярность React, библиотеки для пользовательских интерфейсов, которую создал Facebook, породила немало споров о CSS и о том, есть ли у него будущее в его нынешнем виде — в форме отдельного файла с объявлениями, откуда страница или фрагмент разметки берет информацию для оформления.

Здесь я не буду повторяться или приводить плюсы и минусы. Если вы не в курсе, можете ознакомиться с данной темой, пройдя по этим ссылкам:

• Дебаты на тему «А нужен ли нам вообще CSS?» от Криса Койера
• React: слайды «CSS в JS» и видеопрезентация

Зато я сейчас убедительно докажу, что CSS жив и здоров.

Перевод статьи Grid Tidbits part 2: terminology and basics с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

В этой статье мы познакомимся с терминологией «CSS Grid Layout», основами определения grid-шаблонов и размещения в них элементов.

Это вторая из цикла относительно небольших статей про «Grid Layout». В первой части мы узнали о назначении grid-ов и о текущей ситуации в браузерах.

Для этого «лакомого кусочка» мы сделаем следующее:

• Возьмём элемент и превратим его в grid.
• Увидим, как элементы сами размещаются в grid’е
• Поупражняемся в том, как управлять этим размещением

Перевод статьи 10 Ways to Minimize Reflows and Improve Performance с сайта www.sitepoint.com, автор — Крейг Баклер.

Хотя веб-страницы достигают 2МБ, производительность остается острой темой. Чем шустрее ваше приложение, тем лучше пользовательский опыт и выше конверсия.

При этом я и сам не без греха по части добавления необдуманных CSS3-анимаций и манипулирования множеством DOM-элементов, не задумываясь о последствии. Если дело касается визуальных эффектов, то в «браузерном мире» есть два термина:

В недрах Рабочей группы CSS в W3C зреет маленькая сенсация: есть шанс, что в ближайшее время вместо безнадежно устаревшего документа пятилетней давности мы получим новое, актуальное официальное определение CSS! Хотя в самом документе в качестве основной аудитории указаны разработчики браузеров, веб-разработчикам тоже не помешает знание, какие спецификации CSS сами их авторы считают «готовыми» и годными для реализации, а какие — «сырыми» и экспериментальными.

Вот что официально входит в CSS образца 2015 года, по редакторскому черновику нового документа:

Перевод статьи The state of Web Components  с сайта hacks.mozilla.org, автор — Уилсон Пэйдж.

Веб-компоненты уже давно на примете у разработчиков. Впервые их предложил Алекс Рассел на конференции Fronteers 2011. Идея всколыхнула сообщество и стала темой многих последующих докладов и обсуждений.

В 2013 г. Google выпустил фреймворк на основе веб-компонентов под названием Polymer, чтобы опробовать эти новые API, собрать отклики сообщества и, приняв их во внимание, сделать «конфетку».

Теперь, 4 года спустя, веб-компонентам пора бы быть повсюду, но фактически лишь в Chrome реализована «какая-то их версия». Даже с учетом полифилов ясно, что сообщество не готово полностью принять веб-компоненты, пока они не начнут работать в большинстве браузеров.

Перевод статьи The Debate Around «Do We Even Need CSS Anymore?» с сайта css-tricks.com, автор — Крис Койер.

С недавних пор об этом много спорят. Это обсуждалось на нескольких конференциях и митапах, где я недавно присутствовал. Я видел презентации об этом. Я знаю людей, выпускающих проекты без единой строчки CSS. Дико, да?

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

Перевод статьи Conical gradients, today! с сайта lea.verou.me, автор — Лиа Веру.

Не секрет, что я люблю конические градиенты. Ещё в 2011 году я написала черновик для conical-gradient() в CSS, который помог Табу при добавлении их в «Изображения в качестве CSS-значений 4 уровня» в 2012-м, как он потом признался. Но спустя три года их даже не попытались реализовать. Конечно, спецификация еще довольно «сырая», но не из-за этого конические градиенты не получили поддержки. Бывали экспериментальные реализации и куда хуже описанных функций. Причина, по которой конические градиенты всё ещё не реализованы — мало разработчиков знают о них, поэтому браузеры не видят в них нужды.

Перевод статьи The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths с сайта smashingmagazine.com, автор — Брайан Джеймс.

Впечатляющие интерактивные веб-демонстрации широко используются в нынешнюю эпоху по разным основаниям, преимущественно для рекламы особо выдающихся продуктов и услуг. После обнаружения малоизвестного свойства clip-path в CSS, я пустился в пятимесячное интерактивное приключение по созданию моей собственной с иной целью: распространить знание о трудностях 30 столь же малоизвестных исчезающих видов.

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

In Pieces: 30 видов, 30 кусочков.

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

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

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

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