CSS

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

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

Дело было в пятницу вечером, на любимом форуме нашелся интересный вопрос, на jsFiddle нашлось место для экспериментов. В итоге получилось вот что:

Перевод статьи MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Режимы наложения, контуры обрезки и фильтры в CSS делают ряд эффектов, которые раньше были доступны только в PhotoShop, возможными в вебе

Одна из возможностей, которая объединяет эти CSS-свойства — наложение изображений, для сравнений «до — после», или чтобы реализовать другие визуальные эффекты. Примером может быть наложение лица Хью Джекмана поверх фото Клинта Иствуда в том же возрасте; что особенно эффектно, поскольку они обладают похожими формой черепа и чертами лица.

Перевод статьи What nobody tells you about «will-change» с сайта cssmojo.com, автор — Тьерри Кобленц.

Краткая выжимка: не используйте will-change до тех пор, пока все современные браузеры не будут его поддерживать (если только вы не знаете, что делаете).

Что такое will-change?

[will-change] позволяет разработчику заранее сообщить браузеру (Пользовательскому агенту) что за изменения он намерен применить к элементу. Это позволяет браузеру заранее оптимизировать обработку элемента, выполняя подготовку потенциально затратной работы для анимации, прежде чем она фактически начнётся. http://dev.w3.org/csswg/css—will—change/

Перевод статьи A Primer To Background Positioning In CSS с сайта blogs.adobe.com, автор — Сара Суэйдан.

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

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

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

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

Перевод статьи Clocks с сайта cssanimation.rocks.

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

Перед вами часы, которые мы создадим с помощью HTML, CSS, SVG-фона и небольшого количества JavaScript. Мы будем использовать CSS-анимации или переходы для любых типов движений, а с помощью JavaScript мы будем задавать исходное время и добавим базовые CSS-трансформации.

Перевод статьи Using The CSS :target Selector To Create JavaScript-less UI Effects с сайта blogs.adobe.com, автор — Сара Суэйдан.

Вместо организации связи с новыми страницами, ссылки (элементы <a>) иногда указывают на разделы, фрагменты или другие элементы на той же странице. Ссылки такого рода преобладают при навигации по одностраничным сайтам.

Селектор псевдокласса CSS :target используется для выбора и оформления целевого объекта внутренней ссылки в документе, фрагмента страницы, указанного в атрибуте href ссылки.

Перевод статьи Best Practice for Creating Custom Elements с сайта www.broken-links.com, c разрешения автора — Питера Гастона.

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

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

Перевод статьи Pseudo elements, promise inspection, raw headers, and much more – Firefox Developer Edition 36 с сайта hacks.mozilla.org, автор — Брайан Гринстед.

На канале Версии для разработчиков только что появился Firefox 36, поэтому давайте взглянем на самые важные изменения в Инструментах разработчика, включенные в этот релиз. Мы также рассмотрим некоторые отличия от Firefox 35, поскольку он был издан незадолго до первого анонса Версии для разработчиков. Тут есть о чем поговорить, поэтому давайте начнем.

Перевод статьи Breaking up with Sass: it’s not you, it’s me с сайта benfrain.com, автор — Бен Фрейн.

В данный момент мой процесс работы с CSS налажен практически идеально. Я пишу на Sass, компилирую код с помощью Libsass и добавляю браузерные префиксы с помощью PostCSS/Autoprefixer через Gulp/Grunt. Так зачем же мне рушить всё это?

Меньше года назад мой интерес привлек пост Николаса Галлахера. В нем Николас описывал, как он/они (команда Twitter) использовали JS-инструмент для постобработки CSS.

Перевод статьи Using AngularJS for Data Visualisations с сайта css-tricks.com, автор — Ник Мортон.

Перед вами гостевой пост от Ника Мортона. Должен сказать, что я весьма заинтригован этой идеей. Знаю, что я люблю работать с HTML, SVG и CSS, поэтому, когда Ник поделился со мной мыслью, что мы можем использовать это для создания структуры, и использовать данные непосредственно для стилизации графиков, я заинтересовался. Кроме того, понимание, что благодаря использованию Angular график может автоматически изменяться при изменении данных… это чертовски круто.

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

В этом уроке я расскажу о создании трех различных видов графиков с помощью встроенных CSS и SVG.

Перевод статьи Four More Ways To Hide & Show Elements with HTML and CSS с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Приквел к этой статье – «Четыре способа заставить элементы исчезнуть (и появиться) при помощи CSS» – был сосредоточен на классических техниках для скрытия элементов на странице; на этот раз используются методы, которые работают в современных браузерах, с некоторыми ограничениями для IE. Используется разметка, которая похожа на разметку из предыдущего примера:

Перевод статьи Making An Audio Player With HTML5, Part 3: Microdata and Skinning с сайта demosthenes.info, c разрешения автора — Дадли Стори.

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

Перевод статьи Making An Audio Player With HTML5, Part 2: Prototyping с сайта demosthenes.info, c разрешения автора — Дадли Стори.

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