Прямо сейчас в Амстердаме начинается конференция CSS Day и мы решили попробовать новый формат и сделать текстовую трансляцию в течение дня. Программа: http://cssday.nl/programme

Первый доклад

Эрик Мейер про веб-шрифты в CSS — http://cssday.nl/programme#eric-meyer

Не забывайте указывать локальные (несколько, при возможности) псевдонимы для шрифтов в @font-face, на случай, если шрифты уже установлены.
Если оформление заголовков в тексте веб-шрифтом ещё нормально, то оформление всего текста вызвает проблемы с быстродействием на мобильных.
Вы можете указывать имя шрифта при подключении короче, например font-family:Hlv вместо Helvetica, чтобы экономить место в CSS.
Правда на Windows, если переименовать Helvetica в H, то потеряется связь с Arial, которую автоматически делает система.
Никто кроме разработчиков не смотрит сайты в разных браузерах, так что вы никогда не получите письмо „ваш сайт плохо выглядит в разных браузерах“
Можно использовать свойство unicode-range:U+43, U+48, … внутри @font-face, чтобы применять разные шрифты к разным символам в тексте.
Например unicode-range:U+26 для оформления всех амперсандов в тексте другим шрифтом.
Фикс для Firefox, который не поддерживает unicode-range: указать оформление в виде исключения: unicode-range:U+00-25, U+27-10FFFF
С помощью unicode-range можно оформить, скажем, все прописные буквы другим шрифтом, указав позиции нужных букв в диапазонах
Из-за агрессивной предзагрузки, для более отзывчивого поведения, браузеры подгружают шрифты даже если они не применяются к текущему документу

Второй доклад

Берт Бос про CSS-селекторы — http://cssday.nl/programme#bert-bos

Ссылка на презентацию Берта Боса с CSS Day — http://www.w3.org/Talks/2013/0614-CSS-Amsterdam/
CSS начинался как язык оформления для простых текстовых документов, для сложных случаев предполагалось использовать XSL.
XSL пригодился только для печати, не для интерактивных документов в онлайне. В отсутствии стандартного языка для интерефесов, выиграла пара HTML+CSS
Сегодня целевая аудитория и случаи для применения CSS сильно изменились, остался только целевой формат HTML: древовидный текст, в порядке следования.
В какой-то момент CSS начал работать с элементами вне дерева: ::first-line (letter), формы ::value, псевдоконтент ::before, страницы @page, @top
Селектор [lang|="en"] выбирает первую часть строки, разделённой дефисами, например, lang="en-ca", но не lang="enca"
С минусом в nth-селекторах всё становится чуть сложнее, например: nth-child(-n+3) выбирает только 1, 2 и 3 элементы
Селектор :not непростой и может приводить к ошибкам, но бывают полезные случаи: все картинки без атрибута alt — img:not([alt])
Селектор для локализации с главной страницы CSS на сайте W3C — :not(:lang(en)) > li[lang|=en]:before { content: url(de) " " }
Используйте препроцессоры, вместо того, чтобы ждать всех нужных свойств от CSS, но это не отменяет, что CSS будет развиваться дальше

Третий доклад

Стивен Хей про Flexbox — http://cssday.nl/programme#stephen-hay

Первый браузер и весь веб Тим написал за год, CSS написали за 2 года. Первая CSS-спецификация для раскладки появилась через 17 лет
Flexbox скорее для отдельных компонентов, чем для всей страницы, для этого есть другие спецификации, см. http://xanthir.com/blog/b4580
Если верстать весь макет и элементы на Flexbox, то в какой-то момент вы почувствуете, что вы верстаете на таблицах с распорками
Работая с Flexbox, забудьте про верх, низ, лево и право — есть только оси (главная и поперечная) и начало и конец каждой из них
Главная идея Flexbox — это направление гл. оси: гориз. или верт., его меняет свойство flex-direction:row|column и обратное их направление
Со свойствами flex-grow (shrink, basis) и значениями короткого свойства flex всё не так просто, лучше открыть и поиграть с ними в браузере
Быстрый способ сделать элемент первым в группе с помощью свойства order (если оно уже задано всем) — это сделать order:-1

Четвёртый доклад

Дивья Маньян про фильтры и режимы смешивания в CSS — http://cssday.nl/programme#divya-manian

Старая версия слайдов Дивьи для доклада на CSS Day — http://nimbu.in/cssday На конференции демонстрируется более новая.
Группа FX Task Force объединяет авторов CSS- и SVG-спецификаций для работы над общим CSS-синтаксисом для эффектов.
Свойство и его значения, например, filter:blur(10px) работает в WebKit-браузерах http://caniuse.com/css-filters
Порядок отрисовки элемента с фильтром: формирование (рамка, фон, шрифт), применение фильтров, применение прозрачности, кадрирования
Свойство box-shadow делает тень для прямоугольного блока, фильтр drop-shadow делает тень для видимого контура элемента
Идентичные фильтры в CSS и SVG: filter:blur(radius) и <filter id="blur"><feGaussianBlur stdDeviation="radius"></filter>
SVG-фильтры имеют более широкую поддержку и могу быть использованы как источник для создания CSS-фильтров при обращении к ним по id.
Фильтры используют честное размытие по Гауссу для создания теней, свойства box-shadow и text-shadow используют упрощённое размытие.
Режимы смешивания (screen, overlay, и т.п.) определяют как элемент накладывается на фон: E { mix-blend-mode:multiply }
Режим смешивания включается только для элементов, создающих новый контекст (transform, z-index, opacity, filter)
Для включения нового контекста без применения специальных свойств предполагается использование спец. свойства E { isolation:isolate }
Смешивание дорогостоящее потому, что бразеру сначала нужно отрисовать всё под целевым элементом и только потом применить смешивание.
Смешивание для Canvas: globalCompositeOperation = 'screen' (доступно в ночных сборках Firefox)
Фильтр feBlend потенциально может повторить смешивание, но только самое базовое. В дальнейшем фильтры разовьются в этом направлении.

Пятый доклад

Таб Аткинсон про переменные и условия в CSS — http://cssday.nl/programme#tab-atkins

Ссылка на презентацию Таба Аткинсона — http://www.xanthir.com/talks/2013-06-14/
Текущий вид CSS-переменных: задание — html { var-main-color:red } и использование — .foo { background:var(main-color) }
CSS-переменные, в отличие от препроцессорных, дают привычный каскад и простое получение переменных из JavaScript: el.style
В имени CSS-переменных можно использовать (почти) любые юникодные символы, что может повысить читаемость и понятность кода
CSS-переменные можно использовать как авторские свойства (данные) и дальше легко опираться или использовать их в JavaScript
Проверка на поддержку Flexbox перед использованием: @supports (display:flex) { div {display:flex} }
Несколько условий внутри @supports могут сочетаться с логическими операторами not, and и or — главное внимательно следить за скобками
Условный оператор @supports, в отличие от implementation.hasFeature, работает на парсинге свойств, а не на true и false, что надёжнее.
Будущее переменных: parent-var(foo) — это значение переменной для родителя текущего элемента
Пример динамической переменной: .tree { var-indent:calc(parent-var(indent, 0px) + 1em) } .item { padding-left:var(indent) }
Значение переменной по умолчанию: E { var-main-color: blue !default } — используется, если в итоге не задаётся.
Переменные только первый шаг. Что дальше? Авторские медиавыражения, функции и псевдо-классы (элементы), миксины, @extend из SASS.
Не принятый пока черновик для иерархического CSS, как во всех препроцессорах — http://dev.w3.org/csswg/css-hierarchies/
Более эффективные протоколы SPDY и HTTP2 в ближайшие пару лет сделают ненужным использование CSS-спрайтов.
Возможность указания целевого элемента в селекторе из черновика новых CSS-селекторов — http://dev.w3.org/csswg/selectors/#subjects
Авторы спецификаций не изобретают новые возможности, они собирают лучшее из тысячи существующих (в препроцессорах, напр.) и документируют
CSS-переменные нужно понимать как отдельные свойства, которые собираются вместе по порядку и дальше сражаются за специфичность.
Shadow DOM будет готов для в Chrome и Firefox в ближайший год, чуть позже наверняка подключатся Safari и IE, уже есть хорошие JS-полифилы

Шестой доклад

Дэниел Глазман про медиавыражения — http://cssday.nl/programme#daniel-glazman

CSS WG — около 90 человек, из которых примерно 35 активных участников.
Медиавыражения состоят из CSS и JavaScript API, предложены Opera и Microsoft в 2001 году и стали стандартом только в июне 2012
HTML 4.01 с самого начала описывал правила расширение списка медиатипов, помимо существующих all, screen, print, и т.п.
Синтакс медиавыражений основан на вычислении true и false для выражений и их комбинаций: screen and (color) and (min-width:900px)
Для устаревших браузеров можно предварить выражение неизвестным для них ключевым словом: only screen and (max-width:100px)
Отрицание работает не только для медиатипа, а для всего выражения: not projection and (max-width:100px)
Процентные значения для размеров пока не разрешены в медиавыражениях из-за неопределённости применения, над проблемой думают
Медиавыражения в JavaScript: window.matchMedia(query) для проверки выражения; addListener и removeListener для подписки на изменения выражений.
Пока нет в спецификации: постраничной навигации, определения освещённости, проверки доступности JavaScript, проверки на язык документа.
Медиавыражения на стероидах: в работе черновик для более тонкой проверки различных параметров, даже заданных самим автором документа
Хочется также комбинировать группы выражений под одним именем и использовать дальше только его, чтобы избегать копирования и ошибок
Есть идея отказаться от медиатипов в пользу медиавозможностей, чтобы полагаться на более тонкие возможности браузеров и устройств
Существуют визуальные редакторы для создания медиавыражений: Adobe Edge Reflow (пока бета) и BlueGriffon (написанный мной)
Полезные ссылки для изучения: http://www.w3.org/TR/TR/css3-mediaqueries и http://www.w3.org/TR/cssom-view

Седьмой доклад

Питер Гастон про анимации и переходы — http://cssday.nl/programme#peter-gasston

История анимации в браузерах: 1993 <img> анимированный GIF; 1995 IE+NN <marquee>; 1996 <script>; …2003 animation+transition в Safari
Самый простой переход записывается так: transition:1s (остальные свойства устанавливаются по умолчанию)
Свойство transition-duration может указываться в Ns (секундах) или в Nms (миллисекундах)
Свойство transition-delay тоже указывается единицами времени, но значение может быть отрицательным!
Для управления динамикой анимации можно использовать cubic-bezier() или набор ключевых слов (ease-in, ease-out), см. http://cubic-bezier.com
Для пошаговой анимации указывается функция steps() с различными ключевыми словами и непростой работой
Упоминание none вместо свойства внутри transition отменяет работу всего свойства, однако незнакомые свойства просто игнорируются
WebKit и Blink пытаются анимировать даже несуществующие свойства, в отличие от Firefox, что неправильно
Если animation-direction получает значение reverse, то animation-timing-function тоже переворачивается, напр. из ease-in становится ease-out
Спека говорит: если animation-duration:0s, то animation-fill-mode всё равно применяется, но ни один браузер почему-то так пока не делает
Пока информация об анимациях @keyframes не отображается в инспекторах браузеров, напр. если значение изменилось во время анимации
Свойства, основанные напр. на font-size, тоже будут анимированы: margin:1em, line-height, и т.п. Кроме IE, где работает только line-height
SVG, встроенный прямо в документ, может быть анимирован из CSS этого документа: svg:hover { transition:1s }
При анимации краткого свойства padding, событие transitionend в Firefox срабатывает 4 раза, в WebKit/Blink один раз.
Событие animationstart даёт доступ к информации о стартовавшей анимации: e.timeElapsed и e.animationName
Старайтесь использовать анимацию @keyframes и transition, если она доступна, поскольку браузеры могут их сильно оптимизировать
CSS3 vs jQuery: слой один раз кладётся на видеокарту и работает, в случае со скриптом, это происходит снова и снова во время анимации.
Делайте анимации быстрее, люди приходят к вам на сайт не для того, чтобы смотреть на крутые анимации.

Восьмой доклад

Лия Веру про border-radius — http://cssday.nl/programme#lea-verou

Ссылка на презентацию Лии Веру с CSS Day — http://lea.verou.me/humble-border-radius/ (на конференции показывается обновлённая версия)
Сложные значения borde-radius на самом деле полезны, это не просто интеллектуальная мастурбация CSS WG
Все согласны, что свойство border-radius на самом деле нужно было назвать corner-radius, ведь для его работы не нужно свойство border
Chrome умеет shape-inside:rectangle(0,0, 100%,100%, 100px,100px) — для скругления, которому следует текст, см. http://dev.w3.org/csswg/css-shapes/

pepelsbey/CSSDay.md

Select an option

No results found