Skip to content

Instantly share code, notes, and snippets.

@pepelsbey

pepelsbey/CSSDay.md

Last active April 12, 2016 13:00
Show Gist options
  • Save pepelsbey/5785278 to your computer and use it in GitHub Desktop.
Save pepelsbey/5785278 to your computer and use it in GitHub Desktop.
Download ZIP
Текстовая трансляция с конференции CSS Day в Амстердаме 14 июня — http://cssday.nl
Raw
CSSDay.md

Прямо сейчас в Амстердаме начинается конференция 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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment