Здравствуйте, жители Хабро! Мы добавили новый продукт в нашу серию О'Рейли : 
Гибкий, легкий код, соответствующий стандартам — его можно получить, если подойти к задаче аналитически.
Леа Веру познакомит вас с недокументированными методами поиска элегантных решений широкого спектра задач веб-дизайна.
Книга основана на выступлениях автора на шестидесяти международных конференциях веб-разработчиков, поэтому затрагивает самые актуальные темы — от пользовательского опыта до типографики и визуальных эффектов.
Многие книги, доступные сегодня на рынке, документируют мощь CSS от А до Я.
К лучшему или к худшему, «Секреты CSS» не входят в их число.
Его цель — заполнить пробелы в знаниях, оставшиеся после прочтения справочного материала, открыть вам новые способы использования уже известных вам функций и познакомить вас с полезными функциями CSS, которые не так модны или популярны, но не заслуживают внимания.
меньше любви.
Основная цель этой книги — научить вас решать проблемы с помощью CSS.
для кого эта книга?
Основная целевая аудитория этой книги – разработчики CSS среднего и продвинутого уровня .Избавившись от информации начального уровня, мы можем потратить больше времени на изучение сложных вариантов использования современных функций CSS и их различных комбинаций.
Однако это означает, что я сделал несколько предположения Что касается вашего уровня подготовки, мой дорогой читатель: - Я полагаю, что Вы знаете CSS 2.1 наизусть.
и у вас за плечами несколько лет развития.
Вас не мучает вопрос, как работает позиционирование.
Вы используете сгенерированный контент для украшения своего дизайна без необходимости использования ненужной разметки или изображений.
И ты не висишь !важный по всему коду, потому что вы действительно понимаете особенности, наследование и каскадирование.
Вы знаете компоненты блочной модели и вас не может расстроить коллапс полей.
Вы знакомы с различными единицами изменения длины и знаете, в какой ситуации какую из них лучше всего использовать; - вы хорошо знакомы самые популярные функции CSS3 - либо из статей, опубликованных в Интернете, либо из книг - и пытались их применить, пусть даже и ограничиваясь своими личными проектами.
Даже если вы не изучали их подробно, вы знаете, как создать закругленные углы, добавить тень или определить линейный градиент. Вы уже поигрались с базовыми 2D-преобразованиями и потратили много времени на изучение базовых переходов и анимации; - у вас есть представление о формате SVG , и вы знаете, для чего он используется, даже если сами не создаете файлы в этом формате; - ты умеешь читать и понимать простой код JavaScript , например, что требуется для создания элементов, управления их атрибутами и добавления их в документ; - ты слышал о CSS-препроцессоры и вы знаете, на что они способны, даже если решите не использовать их в своей работе; - ты не купаешься математика на уровне средней школы : квадратные корни, теорема Пифагора, синусы, косинусы и логарифмы.
Однако, чтобы читатели, не соответствующие вышеуказанным требованиям, также могли получить удовольствие от книги, я добавил боковую панель в начале некоторых секретов.
«Предпосылки» , в котором кратко перечислены аспекты CSS или предыдущие секреты, с которыми вам необходимо ознакомиться, чтобы понять и научиться использовать текущий секрет. (Конечно, это не включает в себя функции CSS 2.1, потому что это сделает боковую панель очень длинной.
) Это выглядит так:
Предварительные условия
Знание свойства box-shadow, базовые знания CSS-градиентов, секрет «Гибких эллипсов».Таким образом, даже если некоторые вещи вам неизвестны, вы можете прочитать о них, а затем снова вернуться к тайне.
Если все необходимые условия выполнены, секреты можно читать в любом порядке.
, хотя придерживаться того порядка, в котором они представлены в книге, все же имеет смысл, поскольку он не случайный и я потратил достаточно времени на обдумывание последовательности.
Обратите внимание, что я упомянул «разработчиков CSS» и что «навыки проектирования» не включены в число представленных выше предположений.
Важно помнить это это не книга о дизайне .
Хотя книга «Секреты CSS» неизбежно затрагивает определенные принципы дизайна и описывает некоторые улучшения пользовательского опыта, это прежде всего книга.
о решении проблем с кодом .
Код CSS производит некоторый визуальный вывод, но это по-прежнему код, как и код SVG, код WebGL/OpenGL или JavaScript Canvas API, а не дизайн.
Написание хорошего адаптивного CSS требует того же аналитического мышления, что и программирование.
Сегодня, когда большинство людей используют препроцессоры для своего CSS-кода со всеми их переменными, математическими вычислениями, условиями и циклами, написание CSS-кода почти неотличимо от программирования! Это не значит, что я не призываю дизайнеров прочитать эту книгу.
Любой, у кого есть достаточный опыт программирования CSS, может почерпнуть из него что-то полезное, и многие талантливые дизайнеры также способны писать отличный код CSS. Однако следует отметить, что я Нет Целью этой книги было научить вас, как улучшить визуальный дизайн или удобство использования веб-сайта, даже если это действительно произошло.
Форматирование и соглашения
Эта книга состоит из 47 «тайн», тематически сгруппированных в семь глав.Все эти секреты более или менее независимы и при соблюдении всех предварительных условий к ним можно получить доступ в любом порядке.
Демо в каждом из секретов не являются готовыми сайтами или даже их частями.
Я намеренно сделал их как можно меньшими и простыми, чтобы их было легче изучать.
Я предполагаю, что у вас уже есть представление о том, что вы собираетесь реализовать.
Цель этой книги — не предложить дизайнерские идеи, а решения по их реализации.
Каждый секрет разделен на два или более разделов.
В первом разделе, озаглавленном «Проблема», описывается распространенная проблема, которую мы решим с помощью CSS. Иногда в таком введении я также буду описывать популярные, но недостаточно хорошие решения той или иной проблемы (например, решения, требующие обширной разметки, жестко закодированных значений и т. д.) и чаще всего заканчиваю некоторым вариантом вопроса: is есть ли лучший способ реализовать то же самое? большинство? За описанием проблемы следует одно или несколько решений.
Эта книга была вдохновлена семинарами по CSS, которые я проводил на различных конференциях, поэтому я постарался максимально сохранить в книге интерактивный формат презентации.
Каждое решение сопровождается несколькими иллюстрациями, демонстрирующими наглядный результат каждого шага решения, если он приводит к каким-либо видимым изменениям.
Поскольку иллюстрации не всегда находятся рядом с текстом, описывающим происходящее на них, все иллюстрации пронумерованы и я ссылаюсь на них по номеру.
Код линии выделяется моноширинным шрифтом, а названия и цветовые коды часто дополняются небольшой цветовой меткой (например, #f06).
Фрагменты кода блока выглядят следующим образом:
или вот так:background: url(" http://adamcatlace.jpg ");
HTML<figure>
<img src=" http://adamcatlace.jpg " />
<figcaption>Sir Adam Catlace</figcaption>
</figure>Как вы заметили, если язык фрагмента кода отличается от 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/polka Я настоятельно рекомендую вам внимательно изучить примеры в книге «Попробуйте сами!» коробки, особенно если вас смутило описание техники или вы зашли в тупик, пытаясь воспроизвести пример самостоятельно.
Будущее Будущие решения
В графе «Будущее» описаны методы, для которых были подготовлены проекты спецификаций, но которые еще не были реализованы на момент написания этой статьи.Читателю всегда следует проверять, поддерживаются ли эти методы, поскольку вполне возможно, что они были реализованы уже после выхода книги.
В тех случаях, когда функция настолько неясна, что о ней даже не упоминают на веб-сайтах поддержки браузеров, на этой боковой панели содержится ссылка на тест, который читатель может загрузить, перейдя по короткому, легко запоминающемуся URL-адресу, например, показанному ниже.
в примере «Проверь это!» Дизайн таких тестов обычно включает оттенки зеленого, если функция поддерживается, и оттенки красного в противном случае.
Точные инструкции даны в коде в виде комментариев.
Тест
http://play.csssecrets.io/test-conic-gradient В конце почти всех секретов вы найдете список связанных спецификаций, который выглядит следующим образом:Сопутствующие характеристики
— CSS-фоны и границы — Селекторы — Масштабируемая векторная графика Сюда входят ссылки на все спецификации, особенности которых были упомянуты в секрете.Однако, как и боковая панель «Предварительные требования», боковая панель «Связанные характеристики» не включает в себя функции CSS 2.1 ( http://w3.org/TR/CSS21 ), в противном случае после каждого секрета пришлось бы указывать одни и те же возможности.
Это означает, что те немногие секреты, в которых мы обсуждаем только возможности CSS 2.1, не дополняются боковой панелью «Связанные спецификации».
Поддержка браузеров и запасные решения
Пожалуй, самой необычной особенностью этой книги является полное отсутствие таблиц совместимости браузеров .Это обдуманное решение, поскольку при нынешних циклах выпуска браузеров такая информация неизбежно устаревает еще до того, как книга попадет на полки магазинов.
я полагаю, что Недостоверная информация о поддержке браузера вводит разработчика в заблуждение, что еще хуже, чем отсутствие такой информации.
.
Однако большинство представленных здесь секретов либо достаточно хорошо поддерживаются браузерами, либо для них существуют хорошие запасные решения.
Если поддержка браузером определенного метода слишком низкая, вы увидите значок предупреждения «Ограниченная поддержка» рядом с заголовком этого решения, например, рядом с этим абзацем.
Этого должно быть достаточно, чтобы вы поняли, что не стоит использовать это решение, не проверив уровень поддержки браузера, а также не позаботившись о качественных решениях для резервного копирования.
Иногда вы обнаружите, что определенная функция поддерживается, но реализация в разных браузерах немного различается.
Например, она может потребовать префикс браузера или ее синтаксис может немного отличаться .
В примерах этой книги я использую только синтаксис без префиксов, определенный в стандартах.
Однако практически в любой ситуации можно одновременно использовать разные варианты синтаксиса, и тогда нужный будет выбран автоматически в соответствии с правилами каскадирования.
По этой причине стандартная версия всегда должна быть указана последней .
Например, чтобы получить в книге вертикальный линейный градиент от желтого к красному, я всегда буду использовать только стандартный вариант: 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, поэтому я не обсуждаю их в решениях, представленных в этой книге.
Аналогичным образом, хорошей практикой является предоставление запасных решений, чтобы гарантировать, что ваши веб-сайты не будут работать в старых браузерах, даже за счет более простого внешнего вида.
Когда обходные пути очевидны, я не сосредотачиваюсь на них, поскольку предполагаю, что вы знакомы с принципами каскадирования.
Например, при определении градиента, например, как показано выше, вы можете добавить сплошной цвет в самом начале.
При выборе этого цвета рекомендуется выбирать среднее из двух цветов градиента (в данном случае rgb(255, 128, 0)): 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);
Однако иногда каскадирование не обеспечивает надежного решения резервного копирования.
Тогда, в крайнем случае, можно прибегнуть к использованию таких инструментов, как Модернизр , которые добавляют к корневому элементу такие классы, как 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; // <html>
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[property] = value;
if (dummy.style[property]) {
root.classList.add(id);
return true;
}
root.classList.add('no-' + id);
return false;
}
Тестирование селекторов и правила немного сложнее, но следует тому же принципу: когда дело доходит до CSS, браузеры отбрасывают все, что они не понимают, поэтому, чтобы проверить, распознана ли функция, вы можете динамически применить ее и посмотреть, сохранил ли браузер ее.
Однако вы всегда должны помнить, что даже если браузер способен разобрать синтаксис Возможности CSS не гарантирует, что такая возможность реализована корректно и что она вообще реализована в принципе .
Более подробную информацию о книге можно найти на сайте сайт издателя Оглавление Отрывок Для Хаброжителей скидка 25% по купону - Я считаю Купон действителен как на книгу, так и на всю серию.
О'Рейли Теги: #CSS #Профессиональная литература #книги #книги
-
Двоюродный Брат, Виктор
19 Oct, 24 -
Интересная Форма
19 Oct, 24 -
Windows Мобайл 6.5
19 Oct, 24 -
Как Я Сдал Cfa Level 1
19 Oct, 24
