Привет, Хаброжители! Мы пополнили новинкой свою серию O"Reilly :
Гибкий легкий код, соответствующий стандартам - его можно получить, если подойти к проблеме аналитически. Леа Веру познакомит вас с недокументированными приемами, позволяющими найти изящные решения для самого широкого круга задач веб-дизайна. В основу книги легли доклады автора на шестидесяти международных конференциях веб-разработчиков, так что она затрагивает самые актуальные темы - от взаимодействия с пользователем до типографики и визуальных эффектов. Множество книг, доступных на сегодняшнем рынке, документируют возможности CSS от A до Я. Хорошо это или плохо, но «Секреты CSS» - не одна из них. Ее назначение - заполнить пробелы в знаниях, оставшиеся после того, как вы уже ознакомились со справочными материалами, открыть ваш разум новым способам применения функциональности, которая вам уже известна, а также познакомить вас с полезными возможностями CSS, которые не так модны и популярны, но заслуживают не меньшей любви. Главная задача этой книги - научить вас решать проблемы с помощью CSS.
Для кого эта книга
Главная целевая аудитория этой книги - разработчики CSS среднего и продвинутого уровня . Избавившись от информации начального уровня, мы можем посвятить больше времени изучению сложных сценариев использования современных возможностей CSS и их разнообразных комбинаций. Это, однако, означает, что я сделала несколько предположений относительно вашего уровня подготовки, мой дорогой читатель:Я предполагаю, что CSS 2.1 вы знаете назубок и у вас за плечами несколько лет разработки. Вы не мучаетесь вопросом, как же работает позиционирование. Вы используете генерируемое содержимое для украшения дизайна, не прибегая к помощи лишней разметки или изображений. И вы не развешиваете !important по всему коду, так как действительно понимаете специфичности, наследование и каскадирование. Вы знаете составные части блочной модели и вас не способно расстроить схлопывание полей. Вам знакомы разные единицы изменения длины, и вы знаете, в какой ситуации какую из них лучше применить;
Вы достаточно хорошо знакомы с наиболее популярными возможностями CSS3 - либо из статей, опубликованных в Сети, либо из книг - и пробовали применять их, пусть даже ограничиваясь своими личными проектами. Даже если вы не исследовали их детально, вы знаете, как создать скругленные углы, добавить тень box-shadow или определить линейный градиент. Вы уже поиграли с базовыми двумерными трансформациями и немало времени посвятили изучению базовых переходов и анимации;
У вас есть представление о формате SVG , и вы знаете, для чего он используется, даже если файлы в этом формате вы самостоятельно не создаете;
Вы слышали о препроцессорах CSS и знаете, на что они способны, даже если решили в своей работе их не использовать;
Вы не плаваете в математике уровня средней школы : квадратные корни, теорема Пифагора, синусы, косинусы и логарифмы.
Однако для того чтобы читатели, не удовлетворяющие вышеперечисленным требованиям, также могли наслаждаться книгой, в начале некоторых секретов я добавила врезку «Предварительные требования» , в которой вкратце перечисляю аспекты CSS или предыдущие секреты, с которыми необходимо ознакомиться, чтобы понять и научиться применять текущий секрет. (Сюда, разумеется, не входят возможности CSS 2.1, потому что в этом случае врезка стала бы очень длинной.) Она выглядит так:
Предварительные требования
Знание свойства box-shadow, базовое знание градиентов CSS, секрет «Гибкие эллипсы»Таким образом, даже если какие-то вещи вам неизвестны, вы можете почитать о них, а затем снова вернуться к секрету При условии, что предварительные требования соблюдены, секреты можно читать в любом порядке , хотя имеет смысл все же придерживаться того порядка, в котором они представлены в книге, так как он не случаен и я посвятила достаточно времени обдумыванию последовательности.
Обратите внимание, что я упомянула о «разработчиках CSS» и что «навыки дизайна» среди представленных выше предположений не числятся. Важно помнить, что это не книга о дизайне . Хотя она неизбежно затрагивает определенные принципы дизайна и описывает некоторые улучшения взаимодействия с пользователем, «Секреты CSS» - это в первую очередь книга о решении проблем с кодом . CSS-код порождает некий визуальный результат, но это все еще код, точно такой же, как код SVG, WebGL/OpenGL или JavaScript Canvas API, а не дизайн. Для написания хорошего гибкого CSS требуется такое же аналитическое мышление, что и для программирования. Сегодня, когда большинство людей используют для своего CSS-кода препроцессоры со всеми их переменными, математикой, условными выражениями и циклами, написание кода CSS уже практически неотличимо от программирования!
Это не означает, что я не приглашаю дизайнеров прочитать эту книгу. Каждый, кто обладает достаточным опытом программирования на CSS, может почерпнуть из нее что-нибудь полезное, и многие талантливые дизайнеры также способны писать превосходный CSS-код. Однако необходимо отметить, что я не ставила себе целью в этой книге учить вас совершенствованию визуального дизайна или удобства использования веб-сайта, даже если это и произошло по факту.
Форматирование и условные обозначения
Эта книга состоит из 47 «секретов», тематически сгруппированных в семь глав. Все эти секреты более-менее независимы и - при условии, что все предварительные требования выполняются, - с ними можно знакомиться в любом порядке. Демонстрационные примеры в каждом из секретов - это не готовые веб-сайты и даже не их части. Я намеренно делала их как можно меньше и проще, для того чтобы их было удобнее изучать. Я исхожу из предположения, что вы уже имеете представление о том, что намереваетесь реализовать. Цель этой книги - предоставлять не дизайнерские идеи, а решения по их реализации.Каждый секрет разбит на два или более раздела. Первый раздел, озаглавленный «Проблема», содержит описание распространенной проблемы, которую мы будем решать с помощью CSS. Иногда в таком введении я также описываю популярные, но недостаточно хорошие решения данной проблемы (например, решения, требующие объемной разметки, жестко закодированных значений и т. п.) и чаще всего завершаю его одной из вариаций вопроса: существует ли лучший способ реализовать то же самое?
За описанием проблемы следует одно или несколько решений. Вдохновением для этой книги послужили семинары по CSS, которые я проводила на различных конференциях, поэтому я постаралась сохранить формат интерактивной презентации, насколько это возможно в книге. Каждому решению сопутствуют несколько иллюстраций, демонстрирующих визуальный результат каждого шага решения в случае, если он приводит к каким-то видимым изменениям. Поскольку иллюстрации не всегда находятся рядом с текстом, описывающим происходящее на них, все иллюстрации пронумерованы и я ссылаюсь на них по номерам.
Строковый код выделяется моноширинным шрифтом, а названия и коды цветов часто дополняются небольшой цветовой меткой (например, #f06). Блочные фрагменты кода выглядят так:
Background: url("http://adamcatlace.jpg");
или так:
HTML
Как вы заметили, в случае, когда язык во фрагменте кода отличается от CSS, он указан в заголовке листинга. Помимо этого, если в примере задействован только один элемент, без каких-либо псевдоклассов или псевдоэлементов, то обычно для краткости я опускаю в коде селекторы и фигурные скобки ({}).
Все примеры на JavaScript в этой книге относятся к простейшему уровню и не требуют никакой инфраструктуры или библиотек. Используется только одна вспомогательная функция, $$(), необходимая для того, чтобы было проще проходить по множеству элементов, соответствующих определенному селектору CSS. Вот определение этой функции:
JS function $$(selector, context) { context = context || document; var elements = context.querySelectorAll(selector); return Array.prototype.slice.call(elements); }
Занимательная страничка
Врезка с интересной информацией
Врезки, озаглавленные «Занимательная страничка», - это интересные заметки, связанные с обсуждаемой темой, например, историческая или техническая справка о рассматриваемой возможности CSS. Их не обязательно читать, для того чтобы понять или начать использовать основной материал, и все же они могут оказаться полезными любознательному читателю.К каждому секрету прилагается один или несколько интерактивных примеров, для доступа к которым используются короткие и легкие в запоминании URL-адреса на сайте http://play.csssecrets.io . Ссылки на них выглядят так:
Будущее
Будущие решения
Врезки «Будущее» содержат описание техник, для которых уже подготовлены черновые спецификации, но которые на момент написания этой книги еще не реализованы. Читателю следует всегда проверять, поддерживаются ли эти техники, так как вполне возможна ситуация, что они были реализованы уже после публикации книги. В случаях, когда возможность настолько малоизвестна, что упоминания о ней может не быть даже на веб- сайтах поддержки браузеров, эта врезка включает ссылку на тест, который читатель может загрузить, перейдя по короткому, легко запоминающемуся URL-адресу, такому, как показан ниже в примере «Протестируйте!». Оформление таких тестов обычно включает оттенки зеленого, когда возможность поддерживается, и оттенки красного в противном случае. Точные инструкции приведены в коде в форме комментариев.В конце почти всех секретов вы найдете список связанных спецификаций, который выглядит так:
Связанны спецификации
- CSS Backgrounds & Borders- Selectors
- Scalable Vector Graphics
Сюда входят ссылки на все спецификации, возможности из которых были упомянуты в секрете. Однако так же как и врезка «Предварительные требования», врезка «Связанные спецификации» не включает функциональность CSS 2.1 (http://w3.org/TR/CSS21), иначе одни и те же возможности пришлось бы перечислять после каждого секрета. Это означает, что те несколько секретов, в которых мы обсуждаем только возможности из CSS 2.1, не дополняются врезкой «Связанные спецификации».
Поддержка браузерами и резервные решения
Вероятно, самая необычная особенность этой книги - полное отсутствие таблиц совместимости с браузерами . Это осознанное решение, так как с учетом сегодняшних релизных циклов браузеров подобная информация неизбежно устаревает еще до того, как книга успевает попасть на полки магазинов. Я считаю, что неточная информация о поддержке браузерами вводит разработчика в заблуждение, что еще хуже, чем отсутствие такой информации .Однако большинство представленных здесь секретов либо вполне прилично поддерживаются браузерами, либо для них существуют хорошие резервные решения. Если поддержка браузерами определенной техники находится на слишком низком уровне, вы увидите предупреждающий значок «Ограниченная поддержка» рядом с заголовком соответствующего решения, как здесь, рядом с этим абзацем. Этого должно быть достаточно, для того чтобы вы поняли: не стоит использовать данное решение, не проверив уровень поддержки браузерами, а также не позаботившись о качественных резервных решениях.
Иногда вы будете обнаруживать, что определенная возможность поддерживается, но ее реализация в разных браузерах немного отличается. Например, она может требовать браузерного префикса или ее синтаксис может быть несколько иным . В примерах в этой книге я использую только синтаксис без префиксов, как он определяется в стандартах. Однако практически в любой ситуации вы можете одновременно использовать разные варианты синтаксиса, и тогда нужный будет выбираться автоматически в соответствии с правилами каскадирования. По этой причине стандартную версию всегда следует указывать последней . Например, для получения вертикального линейного градиента от цвета yellow до red в книге я всегда буду использовать только стандартную версию:
Background: linear-gradient(90deg, yellow, red);
Однако если вы хотите обеспечить поддержку очень старых браузеров, возможно, в итоге ваш код будет выглядеть примерно так:
Background: -moz-linear-gradient(0deg, yellow, red);
background: -o-linear-gradient(0deg, yellow, red);
background: -webkit-linear-gradient(0deg, yellow, red);
background: linear-gradient(90deg, yellow, red);
Поскольку ландшафт этих различий настолько же нестабилен, как и поддержка браузерами, я ожидаю, что в вашей работе проверка таких вещей будет одним из этапов обязательного исследования перед применением той или иной возможности CSS, поэтому не обсуждаю их в решениях, представленных в данной книге. Аналогично, хорошей практикой считается обеспечение резервных решений, для того чтобы ваши веб-сайты не ломались в старых браузерах, пусть даже ценой более простецкого внешнего вида. Когда обходные решения очевидны, я не заостряю на них внимание, так как предполагаю, что вы знакомы с принципами каскадирования. Например, при определении градиента, скажем, такого, как показанный выше, вы могли бы добавить в самом начале сплошной цвет.
Background: rgb(255, 128, 0);
background: -moz-linear-gradient(0deg, yellow, red);
background: -o-linear-gradient(0deg, yellow, red);
background: -webkit-linear-gradient(0deg, yellow, red);
background: linear-gradient(90deg, yellow, red);
Однако иногда каскадирование не позволяет обеспечить надежное резервное решение. Тогда в качестве последнего средства можно прибегнуть к помощи инструментов, подобных Modernizr , которые добавляют классы вроде textshadow или no-textshadow к корневому элементу (), чтобы вы могли с помощью них обращаться к элементам только в том случае, когда нужные возможности действительно поддерживаются (или не поддерживаются)
, например:
H1 { color: gray; }
.textshadow h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}
Если возможность, для которой вы пытаетесь создать резервное решение, достаточно новая, то можно использовать правило , «родное» для Modernizr. Например, предыдущий фрагмент кода превратится в такой:
H1 { color: gray; }
@supports (text-shadow: 0 0 .3em gray) {
h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}
}
Однако к использованию следует подходить с большой осторожностью. Применив его здесь, мы ограничили описываемый эффект не просто браузерами, поддерживающими тени для текста, но и браузерами, поддерживающими дополнительно правило , а это куда более ограниченное множество.
И наконец, всегда есть вариант добавить несколько строк кода JavaScript ручной работы, который будет определять, поддерживается ли возможность, и добавлять классы в корневой элемент так же, как это делает Modernizr. Основной способ, как проверить, поддерживается ли свойство, - посмотреть, существует ли он, воспользовавшись объектом element.style любого элемента:
JS
var root = document.documentElement; //
if ("textShadow" in root.style) {
root.classList.add("textshadow");
}
else {
root.classList.add("no-textshadow");
}
Если нам нужно проверить несколько свойств, предыдущую проверку легко превратить в функцию:
JS
function testProperty(property) {
var root = document.documentElement;
if (property in root.style) {
root.classList.add(property.toLowerCase());
return true;
}
root.classList.add("no-" + property.toLowerCase());
return false;
}
Для того чтобы протестировать значение, нужно присвоить его свойству и проверить, сохранит ли его браузер. Поскольку здесь мы модифицируем стили, а не просто проверяем их существование, в тесте разумно использовать элемент-заглушку:
JS
var dummy = document.createElement("p");
dummy.style.backgroundImage = "linear-gradient(red,tan)";
if (dummy.style.backgroundImage) {
root.classList.add("lineargradients");
}
else {
root.classList.add("no-lineargradients");
}
Это также легко преобразуется в функцию:
JS
function testValue(id, value, property) {
var dummy = document.createElement("p");
dummy.style = value;
if (dummy.style) {
root.classList.add(id);
return true;
}
root.classList.add("no-" + id);
return false;
}
Тестирование селекторов и немного сложнее, но выполняется по тому же принципу: когда дело доходит до CSS, браузеры отбрасывают все, что они не понимают, так что для проверки того, была ли возможность распознана, можно динамично применить ее и посмотреть, сохранил ли ее браузер. Необходимо всегда помнить, однако, что даже если браузер в состоянии разобрать синтаксис
возможности CSS, это не гарантирует, что таковая возможность реализована правильно и что она вообще реализована в принципе
.
Более подробно с книгой можно ознакомиться на сайте издательства
Оглавление
Отрывок
Для Хаброжителей скидка 25% по купону - Веру
Купон действует на книгу, а также на всю серию
Каскадный таблицы стилей обладают огромным функционалом и скрывают много интересных особенностей, а порой и подводных камней. За время работы у меня накопилось (и продолжает накапливаться) библиотека связанных с CSS трюков и секретов. Что-то забывается, что-то кажется сегодня ненужным, но может пригодится в будущем. Поэтому самое правильное, это записывать и делиться и самому проще потом найти и кому-то еще может оказаться полезно.
Многие примеры кастомных элементов совершенно не соответствуют проблемам действительности. Начнем с того как в принципе делается кастомный чекбокс и откуда идет необходимость. С необходимость все просто – нативный дизайн чебоксов мало кому нравится и смотрится не очень почти в любом сайте. Теперь как его, собственно, изменить – нативный компонент изменить не получится, каким он родился,
Отличная статья с визуальными примерами о том как работает схлопывание внешних отступов у элементов – What’s the Deal with Margin Collapse?. Как-то так получилось, что не все фронтенд разработчики знают об этом поведении внешних отступов. Когда схлопывание происходит У двух соседних элементов. У дочернего элемента. В том случае, если высота элемента равна нулю, то схлопнуться
Порой нужно разобраться в том где расположен каждый из элементов. Это нужно обычно для того чтобы найти баг в css. Например, отловить как внезапно нарисовался скроллбар или почему появился лишний overflow. Самое простое решение для этого – выделить все элементы добавив им рамку. Однако, использовать стиль border не стоит потому что поедет верстка, так как
Доклад Виталия Фридмана (Vitaly Friedman) о том как сделать веб лучше и быстрее для всех. Виталий копает в браузерных технология так глубоко, что скоро найдет нефть. В этом и вся прелесть его докладов. Рекомендую всегда. Я перечислю основные моменты видео, самая презентация целиком находится ниже. Сжимаем изображения Помимо gzip существует еще как минимум 2 технологии
Каждый раз как говорю о том, что нужно оптимизировать css селекторы, не использовать каскады, то слышу в ответ – “так и так быстро работает, тем более на небольшом количестве элементов”. И тут сложно не согласиться – действительно быстро, если немного элементов, более того вы скорее всего и не сталкивались толком с проблемами медлительности из-за кривых
Немного новостей из мира обновлений в хроме. Остальные браузеры тоже подхватывают конечно, но пока выступают только в роли догоняющих. Новая разметка grid В сентябре прошлого года я писал о том, что в браузеры собираются внедрять новую css разметку. Так вот она уже в хроме! Можно брать и пользоваться. Кстати, поддерживается всеми современными браузерами. Сайт с
Разные селекторы по-разному обрабатываются браузером (капитан очевидность). Как следствие одни работают быстрее чем другие. Имеет смысл внимательно подходить к работе с селекторами с самого начала, потому что когда уже нужно решать проблему с перформансом написано столько кода, что мама не горюй. Разные селекторы по скорости работы. Чем ниже, тем хуже. ID, например Класс, например
Очень приятная коллеция примеров визуальных веб решений – анимация, скрипты. Аж больше 300 штук, собранных отовсюду в сети. Автор конечно проделал большую работу, разумеется большая часть этих примеров так и останется на полках фронтендеров, но для вдохнавления все равно стоит посмотреть 😉 Ссылки
Даже верстальщики с довольно таки большим опытом долго не могут привыкнуть к тому, что только с помощью CSS можно сделать практически что угодно - от разметки колонок до кнопок и всплывающих окон. Технология Cascading Style Sheets позволяет указывать практически любые элементы дизайна — от размера шрифтов до цвета отдельных блоков. Но не все знаю, что CSS могут сделать намного больше.
Синтаксис CSS
Существуют три способа применения стилей в документе HTML.
1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.
Текст красного цвета
2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора
текст красного цвета