7 CSS инструментов, которые вам следует использовать


Содержание материала:

7 CSS инструментов, которые вам следует использовать

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

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

Этот пост предназначен для объединения 20 лучших советов и трюков, которые вам, вероятно, понадобятся на ежедневной основе при создании маркетинговых активов.

1. Круглые углы без изображений

Вот простая методика CSS округления углов DIV с использованием некоторых атрибутов css. Этот метод будет работать в Firefox, Safari, Chrome и любом другом браузере, совместимом с CSS3. Этот метод не будет работать в Internet Explorer.

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

2. Создайте специальную таблицу стилей IE

Создайте отдельную таблицу стилей и включите ее на веб-странице всякий раз, когда клиент использует Internet Explorer.

3. Фоновое изображение текстового поля

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

4. Установка минимальной ширины страницы

Очень удобная команда CSS, которая существует, это команда min-width, в которой вы можете указать минимальную ширину для любого элемента. Это может быть особенно полезно для указания минимальной ширины страницы.

Затем мы создаем наши команды CSS, чтобы создать минимальную ширину 600 пикселей:

#container <
min-width: 600px;
width:expression(document.body.clientWidth 5. Прозрачность кросс-браузера

Используйте следующую таблицу стилей, чтобы сделать элемент-трансперант, установив уровень непрозрачности.

6. Запретить прокрутку Firefox Scrollbar Jump

В Firefox не отображается полоса прокрутки, если содержимое страницы соответствует высоте браузера. Но если контент растет, Firefox отображает полосу прокрутки, выполняя скачок прокрутки. Содержимое экрана будет сдвинуто влево. Чтобы этого избежать, мы можем сказать, что Firefox по умолчанию добавляет полосу прокрутки.

7. Поворот текста с помощью CSS

Этот пример поворачивает текст на 90 градусов против часовой стрелки.

Свойство вращения фильтра BasicImage Internet Explorer может принимать одно из четырех значений: 0, 1, 2 или 3, которые будут вращать соответственно элементы 0, 90, 180 или 270.

.rotate-style <
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* Internet Explorer */
filter: prog >>

8. CSS для мобильных устройств

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

Следующая команда используется для вызова документа CSS для карманных компьютеров:

9. Изменить цвет выделения текста

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

/* Mozilla based browsers */
::-moz-selection <
background-color: #FFA;
color: #000;
>

/* Works in Safari */
::selection <
background-color: #FFA;
color: #000;
>

10. Удалите пунктирные границы

Пунктирные границы вокруг ссылок — это функция доступности, доступная большинству браузеров по умолчанию.

11. Центрирование веб-сайта

Большая часть веб-сайта использует этот метод для центра контента.

Очередной блог фрилансера

коротко и полезно о веб-разработке

Полезные инструменты для CSS-разработки

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

Pure CSS

Pure – это набор CSS-модулей, разработанных компанией Yahoo, которые вы можете использовать как основу в любом веб-проекте. Фреймворк значительно облегчает CSS-разработку и если вы о нем еще не слышали, самое время попробовать.

Больше информации: http://purecss.io/

CSS only responsive navigation

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

CSS Trashman

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

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

Helium CSS

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

Topcoat

Topcoat – это очень аккуратная библиотека CSS-классов, специализирующаяся на элементах формы: кнопках, флажках, слайдерах и т.д. Самый простой способ украсить ваш сайт или веб-приложение за несколько минут.

Больше информации: http://topcoat.io/

.Fitgrd

.Fitgrd – это прочный фундамент для создания собственного адаптивного сайта. Все в ваших руках, кроме сетки, о ней позаботиться.Fitgrd, сэкономив вам кучу времени на написание несущественного кода.

Больше информации: http://www.fitgrd.com/

Normalize.css

Normalize.css это HTML5-альтернатива CSS-сбросам. Он заставляет браузер отрисовывать все элементы более согласованно и в соответствии с современными стандартами. Normalize.css используется множеством популярных сайтов, таких как Twitter Bootstrap, Soundcloud, TweetDeck и многих других.

Bear CSS

Bear CSS это не только красивый сайт, но и очень полезный инструмент. Просто создайте HTML-документ и загрузите туда. Bear CSS автоматически сгенерирует загружаемый CSS-файл, основанный на используемых HTML-элементах. Отличная экономия времени!

Больше информации: http://bearcss.com/

Перевод статьи “Super useful tools for CSS coding”, автор Jean-Baptiste Jung.

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

7 CSS инструментов, которые вам следует использовать

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

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Каскады и наследование стилей

Ключом к пониманию стилей является понимание их каскадирования и наследования. Смысл каскадирования и наследования заключается в том, что с их помощью браузер определяет, какие значения следует использовать для свойства, когда он отображает элемент. У каждого элемента имеется ряд CSS свойств, которые будут использоваться, когда браузер отображает страницу. Для работы с каждым из этих свойств браузер должен перемещаться по всем источникам стилей, которые у него есть. Вы видели три различных способа определения стилей (внутренний, встроенный и внешняя таблица стилей), но есть два других источника стилей, о которых вы должны знать.

Браузерные стили

Браузерные стили (более известные как стили пользовательского агента) являются стилями по умолчанию, которые браузер применяет к элементу, если не были указаны другие стили. Эти стили немного различаются у разных браузеров, но они, как правило, в целом аналогичны. В качестве примера рассмотрим, как браузер отображает элемент а , гиперссылку, когда нет других стилей, определенных в HTML документе. В листинге 4-10 показан простой HTML документ, который не содержит никаких стилей.

Листинг 4-10: HTML документ, который не содержит стилей

Этот листинг является всего лишь вариацией предыдущего примера, только без всякого стиля. Вы можете увидеть, как браузер отображает элементы, на рисунке 4-7.

Рисунок 4-7: Стиль по умолчанию для элементов гиперссылки

Мы так привыкли видеть стили, которые браузеры используют для показа ссылок, что уже не обращаем на это никакого внимания. Однако если мы остановимся и внимательно на них посмотрим, то сможем увидеть детали стиля. Текстовое содержимое ссылки отображается синим цветом, и оно подчеркнуто. Можно немного отвлечься и представить себе, что браузер применяет стиль, похожий на тот, что показан в листинге 4-11.

Листинг 4-11: Создание стиля, сходного тому, который использует браузер по умолчанию для элемента a

У браузеров нет стилей по умолчанию для каждого HTML элемента, но многие элементы отображаются с помощью таких стилей. В каждой главе этой книги, которая описывает HTML элементы, я расскажу о стилях по умолчанию, обычно применяемых браузерами. Вы можете посмотреть описание элемента a в главе 8.

Пользовательские стили

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

У каждого браузера есть свой собственный механизм для пользовательских стилей. Google Chrome, например, создает файл в папке профиля пользователя с именем Default\User StyleSheets\Custom.css . Любые стили, добавленные в этот файл, применяются к любому сайту, который посещает пользователь, при условии соблюдения правил каскадирования, которые я опишу в следующем разделе. В качестве простого примера в листинге 4-12 показан стиль, который я добавил в мой файл custom.css .

Листинг 4-12: Добавление стиля в пользовательскую таблицу стилей

Этот стиль применяется к элементу a и переопределяет браузерный стиль по умолчанию. На рисунке 4-8 показан результат использования моего пользовательского стиля, когда я перезагружаю HTML документ листинга 4-9.

Рисунок 4-8: Определение пользовательских стилей

Каскадирование стилей

Теперь, когда вы видели все источники стилей, из которых браузер должен выбирать нужный, вы можете посмотреть, в каком порядке браузер будет искать значение свойства, когда дело дойдет до отображения элементов. Этот порядок является очень точным:

  1. Внутренние стили (стили, которые определяются для элемента с помощью глобального атрибута style )
  2. Встроенные стили (стили, которые определены элементом style )
  3. Внешние стили (стили, которые импортируются при помощи элемента link )
  4. Пользовательские стили (стили, которые были определены пользователем)
  5. Браузерные стили (стили по умолчанию, которые применяются браузером)

Представьте себе, что пользователю нужно отобразить элемент a . Одной из вещей, которую должен знать браузер, является цвет отображения текста. Чтобы решить этот вопрос, нужно найти значение CSS свойства color . Во-первых, браузер будет проверять, имеет ли обрабатываемый элемент внутренний стиль, который определяет значение цвета, например:

Если внутреннего стиля нет, браузер будет искать элемент style , содержащий стиль, который применяется к обрабатываемому элементу, например:

Если такого элемента style нет, браузер ищет в таблицах стилей, которые были загружены при помощи элемента link , и так далее, пока браузер не найдет нужного значение свойства color ; это обозначает, что если он такового не найдет, то будет использовать значение, заданное в браузерных стилях по умолчанию.

Первые три источника свойства (внутренние стили, встроенные стили и таблицы стилей) в совокупности именуются авторскими стилями. Стили, определенные в пользовательских таблицах стилей, известны как пользовательские стили; и стили, определенные в браузере, известны как браузерные стили.

Изменение порядка при помощи стилей important

Вы можете изменить обычный порядок каскада, отметив ваши значения свойств как important, что показано в листинге 4-13.

Листинг 4-13: Обозначение свойств стиля как important

Вы отмечаете отдельные значения как важные, добавляя в объявление !important . Браузер отдает предпочтение важным стилям (стилям с !important ), независимо от того, где они определены. Вы можете увидеть результат использования стиля с !important на рисунке 4-9, где встроенное значение свойства color переопределяет внутреннее значение. (Возможно, это немного трудно понять по печатной странице).

Рисунок 4-9: Значения !important свойства переопределяют внутренние значения свойства

Единственным, что будет иметь приоритет над важным значением ( !important ), которое вы определяете, является важное значение, определенное в пользовательских таблицах стилей. Для обычных значений авторские стили используются прежде чем пользовательские стили, но это порядок меняется, когда речь идет о значениях !important .

Топ-пост этого месяца:  Как сжать изображения WordPress Плагин EWWW Image Optimizer

Вычисление специфичности и порядка использования стилей с равным приоритетом


Вы сталкиваетесь с равным приоритетом стилей (tie-breaking), если существуют два стиля, которые могут применяться к элементу, и они определенны на одном и том же уровне, и оба содержат значения CSS свойства, которое ищет браузер. Чтобы решить, какие значения использовать, браузер оценивает специфичность каждого стиля и выбирает тот, который наиболее специфичен. Браузер определяет специфичность стиля, подсчитывая три разные характеристики:

  1. Число значений id в селекторе стиля
  2. Число атрибутов и псевдо-классов в селекторе
  3. Число имен элементов и псевдо-элементов в селекторе

Я объясню, как создать селекторы, которые содержат все эти различные характеристики в главах 17 и 18. Браузер подсчитывает значения каждой оценки и применяет значение свойства наиболее специфичного стиля. Очень простой пример специфичности представлен в листинге 4-14.

Листинг 4-14: Специфичность стилей

При оценке специфичности вы создаете число в виде a-b-c , где каждая буква является итоговой суммой одной из трех подсчитываемых характеристик. Это не трехзначное число: более специфичным является тот стиль, чье значение a является наибольшим. Только если a значения равны, браузер сравнивает значения b : стиль с большим значением b является более специфичным в данном случае. Только если оба значения a и b равны, браузер рассматривает значение с . Это обозначает, что специфичность 1-0-0 является более приоритетной, чем 0-5-5.

В нашем случае селектор a.myclass включает в себя атрибут класса, а это значит, что специфичность стиля равна 0-1-0 (0 значений id + 1 другой атрибут + 0 имен элементов). Другой стиль имеет специфичность равную 0-0-0 (то есть, он не содержит id , других атрибутов или имен элементов). Браузер находит значение свойства color при обработке a элемента, который был назначен классу myclass . Для всех остальных a элементов будет использоваться значение другого стиля. Вы можете увидеть, как браузер выбирает и применяет значения для данного примера, на рисунке 4-10.

Рисунок 4-10: Применение значений нужных стилей, основываясь на их специфичности

Если есть значения, определенные в стилях с одинаковой специфичностью, браузер выберет нужное значение, основываясь на порядке, в котором значения были определены: будет использоваться то значение, которое было определено последним. В листинге 4-15 показан документ, который содержит два стиля с одинаковой специфичностью.

Листинг 4-15: Стили с одинаковой специфичностью

Оба стиля, определенные в элементе style , имеют одинаковые оценки специфичности. Когда браузер будет представлять второй элемент а на странице, он выберет значение white для обозначения свойства color , потому что это значение определено в последнем стиле. Вы можете увидеть результат на рисунке 4-11.

Рисунок 4-11: Выбор значения свойства на основании порядка, в котором определены стили

Вы можете изменить порядок следования стилей, чтобы убедиться, что именно таким образом браузер выбирает значение свойства color , как показано в листинге 4-16.

Листинг 4-16: Изменение порядка определения стилей

Как и ожидалось, значением, которое браузер выберет для свойства color , теперь будет black , что и показано на рисунке 4-12.

Рисунок 4-12: Результат изменения порядка определения стилей

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

Наследование

Если браузер не может найти значение свойства в одном из доступных стилей, он будет использовать наследование, то есть он будет использовать значение свойства, определенного родительским элементом. В листинге 4-17 представлен пример.

Листинг 4-17: Наследование CSS свойства

В этом примере мы заинтересованы в свойствах, которые браузера применяет к элементу span , чьим родительским элементом является элемент p . Вы можете увидеть, как браузер обрабатывает этот документ, на рисунке 4-13.

Рисунок 4-13: Применение унаследованного значения CSS свойства

Нигде в этом документе я не определял в стиле значение для свойства color , которое применяется к элементу span , но браузер использует значение white для отображения текстового содержания. Это значение было унаследовано от родительского элемента p .

Это может показаться странным, но не все CSS свойства наследуются. Как правило, те, которые относятся к представлению элементов, наследуются (цвет текста, шрифт и т.д.), а те, которые относятся к расположению элементов на странице, не наследуются. Вы можете специально задать в стиле наследование с помощью особого значения inherit , которое явно указывает браузеру использовать для свойства значения родительского элемента. В листинге 4-18 показано, как используется значение inherit .

Листинг 4-18: Использование специального значения inherit

В этом примере я создал стиль, который будет применен к элементу span и унаследует значение свойства border родительского элемента. Вы можете увидеть результат на рисунке 4-14. Сейчас вокруг элемента span есть рамка, и она содержится в элементе p .

Рисунок 4-14: Использование наследуемого свойства

Dobrovoi Master

Обзор действительно полезных инструментов для разработчиков CSS

Всем доброго дня или ночи.
Независимо от размера и масштаба проекта, css-верстка всегда является процессом не только интересным и увлекательным, но и ко всему прочему, довольно таки утомительным, и занимает уйму времени. Даже если вы опытный веб-разработчик, разговаривающий на ты с таблицами каскадных стилей (CSS), в совершенстве владеющий магией CSS, то и в этом случае, вам не помешает иметь в своей обойме, набор хороших инструментов, который может существенно повысить производительность, да и просто избавить вас от рутинной работы.
В своих статьях, я рассказывал о некоторых онлайн-инструментах, отдельно и подробнейшим образом поведал в свое время, о довольно простом и совершенно бесплатном веб-генераторе CSS3, с контролем над базовыми атрибутами CSS3. Но этого мало по определению, на просторах интернета создаются и плодотворно работают множество полезнейших ресурсов, призванных облегчить «не легкий» труд веб-разработчиков всех мастей.

Сегодня хочу познакомить вас, уважаемые мои читатели, с более полным списком действительно полезных инструментов для разработчиков CSS. Вошедшие в обзор сервисы, каждый по своему хорош или не очень, выбор всегда остается за вами. Ну, а стало быть, без лишней суеты, внимательно читаем, выбираем и продолжаем творить доброе и вечное :)))

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

Спрайты / Sprites

CSS Sprite Generator

Простенький, но шустрый спрайт-генератор, который создает один спрайт изображения и генерирует соответствующий код CSS для вас.

CSS Sprite – Online CSS Sprite Builder / Generator

Интерактивный инструмент, в помощь веб-дизайнерам и веб-разработчикам для создания CSS Sprites. Все, что нужно сделать, это загрузить несколько файлов, а сервис с легкостью генерирует спрайт изображения, сопроводив результат удобоваримым кодом HTML и CSS.

Генератор CSS спрайтов

CSS Спрайт-генератор будет объединять загруженные изображения в один спрайт и генерировать исходный код CSS. Немаловажным и приятным фактором является присутствие Русского языка в интерфейсе этого онлайн-инструментария, что существенно облегчает работу с сервисом. Хотите запустить локальную копию? Теперь вы это можете.

Цвета / Colors

CSS Color Editor

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

Color Palette Generator

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

Colour Contrast Check

С помощью этой веб-утилиты, вы легко сможете проверить цветовой контраст, предварительно указав цвет фона и переднего плана. Например, бывает очень полезно, когда необходимо определить контрастность текста на фоне заданного цвета или же при просмотре на черно-белом экране(да-да бывает и такое).

ColorZilla

ColorZilla это знакомое многим расширение для Firefox, предлагает пользователям самые передовые инструменты, в обойме дополнения выбора цвета, просмотр палитры, полное увеличение страницы, расширение позволяет получать различную информацию об элементах DOM быстро и легко, поддержка firebug, и еще куча разных полезностей.

CSS3 Генераторы

CSS3 Generator

Привычный и понятный онлайн-генератор CSS3 с полным набором функций, отлично справляется с генерацией кода для border radius, box shadow, text shadow, RGBA, @font-face, multiple columns, box resize, box sizing и outline.

Coded Bits

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

Из серии онлайн-генераторов CSS3, хочу предложить списком инструменты, предназначенные для генерации кода отдельных функций css3:

  • CSS Border Radius
    Формирует «border-radius» с поддержкой в Mozilla, WebKit и стандартных CSS3.
  • CSS3 Gradient Generator
    Генерирует линейный «градиент» для Mozilla и WebKit браузеров, а так же с недавних пор включена поддержка Opera11 + и Internet Explorer 8 +.
  • CSS3 Learning Tool
    Возможность быстро проверить, является ли конкретное свойство CSS3 поддерживаемым вашим браузером, с попутной генерацией кода.
  • @font-face Generator
    Простой в использовании CSS3 @font-face генератор, без особых излишеств и наворотов, загружаете шрифт, выбираете из трех стилей CSS, заключаете соглашение и смотрите результат.

Анализ и отладка CSS

CSS Analyzer

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

Сервис проверки CSS от W3C

Проверка каскадных таблиц стилей (CSS) и документов (X) HTML со встроенными таблицами стилей. Все очень просто и лаконично, вводите url вашего файла стилей или html документа, смело жмете кнопу «Проверить» и получаете результат, плохой или хороший зависит только от вас и ваших познаний по теме.

Firebug

Один из самых популярных инструментов веб-разработчиков — Firebug является надстройкой браузера Firefox, которая позволяет редактировать, отлаживать и контролировать CSS, HTML, JavaScript. Удобный просмотр HTML-кода страницы. Функция Inspect позволяет точно определить местонахождение тега того или иного элемента, просмотреть все «привязанные» к нему свойства и стили. Редактирование HTML и CSS прямо в браузере. Можно изменять атрибуты тегов и значения свойств для того, чтобы пронаблюдать изменения. Удобно для тех случаев, когда нужно путём экспериментов найти наиболее приемлемый вариант оформления создаваемой страницы. Отладка JavaScript. Отслеживание процесса загрузки страницы. Просмотр HTTP-заголовков обычных и AJAX-запросов. Вы можете использовать Firebug Lite в IE, Opera, и Safari.

Оптимизация CSS

CSS Drive CSS Compressor

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

Robson CSS Compressor

Еще один хороший компрессор CSS. Разработчики сервиса докрутили все функции и в данный момент вы можете в полной мере испытать возможности этого онлайн-инструмента.

Ну что друзья, надеюсь я ни кого не утомил большим количеством «букав», но пожалуй стоит перевести дух и продолжить рассказ о полезных инструментах для веб-разработчиков уже в следующий раз. А рассказать еще много есть о чем. В ближайшем будущем рассмотрим подборки подручных сервисов из таких категорий, как «Шпаргалки CSS», «Селекторы», «Форматирование CSS», «Преобразователи» и поддержка функций CSS конкретными браузерами. Тема по истине огромная и не менее увлекательная, так что жду ваших комментариев, откликов на статью и конечно же ссылки на интересные ресурсы, которые вам попадались на глаза. О достойных нашего и вашего внимания мы обязательно поговорим и расскажем всем-всем-всем.

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

7 единиц CSS о которых вы должны знать

Работая с CCS, очень легко застрять на каком-то моменте, ведь порой работая даже по знакомому методу, бывает, что появляются новые проблемы.

По мере того, как растет Интернет, растет и спрос на новые решения. А раз уж мы с вами являемся веб-дизайнерами и разработчиками фронтенда, у нас нет другого выбора, как уметь работать с различными опциями и уметь работать хорошо.

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

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

rem

Начнем с того, что похоже на то, что вам, скорее всего, уже знакомо. Единица em определяется как текущий font-size. Так, если вы, например, установите font-size (размер шрифта) на элементе body, то значение em любого младшего элемента в пределах body будет равна этому font-size.

Здесь мы написали, что у div font-size будет равен 1.2em. Это в 1.2 раза больше чем font-size, у которого он унаследовал, он составлял 14px. Таким образом, результат 16.8px.

Однако, что произойдет, если вы каскадом расположите определяемые em font-size внутри друг друга? В следующем отрывке мы применяет тот же самый CCS, что и выше. Каждый div наследует font-size от своего родителя, выдавая нам постепенно увеличивающиеся размеры шрифта.

Не смотря на то, что это может подойти в некоторых случаях, часто мы хотим просто полагаться на единственную метрику для измерения. В этом случае мы должны использовать rem. “r” в rem обозначает “корень”; он равен набору размера шрифта в элементе корня; в большинстве случаев он является элементом HTML.

Во всех трех div из предыдущего примера, шрифт может достигать 16.8px.

5 баллов, Grid

Rem полезны не только в калибровке шрифта. Например, мы могли бы базировать всю систему grid или библиотеку UI по использованию размера шрифта HTML корня rem, и использовать их вычисление в определенных местах. Это дало бы нам более предсказуемую калибровку шрифта и вычисления.

Топ-пост этого месяца:  Как заработать в Инстаграм все виды и способы заработка

Концепт идеи состоит в том, чтобы позволить нашему интерфейсу быть соизмеримым с размером контента. Хотя не обязательно, чтобы в каждом взятом случае это имело одинаковый смысл.

vh и vw

Отзывчивые методы веб-дизайна полагаются, в большой степени, на правило процента. Однако процент CSS – не всегда лучшее решение для каждой проблемы. Ширина CSS родственна ближайшему элементу, в котором содержится родитель. Что, если мы хотим использовать ширину или высоту окна просмотра вместо ширины исходного элемента? Это именно то, что помогают делать единицы vh и vw.

Элемент vh равен 1/100 высоты окна просмотра. Например, если высота браузера 900px, 1vh может достигать 9px. Также, если ширина окна просмотра составляет 750px, 1vw может достичь 7.5px.

Кажется, что это правило можно использовать бесконечно. Например, очень простой способ достигнуть с помощью одной единственной строки CSS полной высоты или приблизительно полной высоты слайдов можно:

Предположим, вы хотите сделать заголовок, который заполнит всю ширину экрана. Чтобы сделать это, вам необходимо установить font-size в vw. Этот размер будет соизмерим с шириной браузера.

vmin и vmax

В то время как vh и vm всегда связаны с высотой и шириной окна просмотра, также vmin и vmax связаны с максимумом и минимумом этой высоты и ширины, в зависимости от того, какая из них меньше, а какая больше. Например, если браузер имеет параметры 1100px в ширину и 700px в высоту, 1vmin будет 7px, а 1vmax – 11px. Однако, если ширина установлена на 800px, а высота на 1080px, то vmin будет равен 8px, в то время как vmax будет установлен на 10.8px.

В каких случаях вы сможете использовать эти значения?

Представьте, что вам нужен элемент, который всегда остается видимым на экране. Используя высоту и ширину, установленные значением vmin ниже 100 позволит вам этого добиться. Например, квадратный элемент, который касается, как минимум двух частей экрана может быть определен так:

Если вам нужен квадрат, который будет покрывать всю видимую зону окна просмотра, используйте те же правила, но кроме vmax.

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

ex и ch

Единицы ex и ch, так же как em и rem, соотносятся с current font и font size. Однако, поскольку они основаны на определенных для шрифта мерах, ex и ch также соотносятся с font-family, в отличие от em и rem.

Единица ch или единица character, определяется как «улучшенная мера» ширины знака 0. Это понятие вызвало много споров, но основная идея состоит в том, что обладая шрифтом фиксированной ширины, квадрат с шириной N знаками единиц, таких как width: 40ch; могут всегда содержать последовательность из 40 знаков в этом конкретном шрифте. В то время как обычное использование этого особого правила состоит в расположении шрифта Брайля, возможности для креативности здесь, конечно, простираются вне этих простых заявлений.

Единица ex определяется как «х-высота текущего шрифта ИЛИ одна-вторая от em». Thex-высота данного шрифта – высота строчных букв x того шрифта. Чаще всего, это примерно в средней отметке шрифта.


Существует много областей, где могут использоваться подобные единицы. Чаще всего в типографии. Например, элемент sup, который выступает как superscript, может быть добавлен в строку, используя соответствующую позицию и конечное значение 1ex. Точно так же вы можете сбросить нижний элемент. Ошибки браузера исправляются правилами superscript- и subscript-specific vertical-align, но если вы хотите больше контроля, вы можете попробовать следующее:

Вывод

Очень важно следить за развитием и распространением CSS, так же как и узнавать о новых инструментах и добавлять их к себе в список умений. Скорее всего, вы встретитесь с проблемами, которые могут быть решены с помощью этих единиц. Не пожалейте времени и прочитайте спецификацию. Подпишитесь на обновления от cssweekly. И, конечно, не забудьте подписаться на еженедельные обновления и бесплатные обучающие видео на Tuts+!

10 полезных CSS3-инструментов для веб-разработки

HTML5 уже давно является неотъемлемой частью дизайна. Еще один фактор, который в наши дни также стоит учитывать – это CSS3. CSS3 предлагает новые возможности в области разработки и веб-дизайна. В нашей сегодняшней записи мы собрали для вас подборку полезных инструментов, которыми вы можете воспользоваться при разработке последующих проектов.

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

Простая таблица для разработки красивых элементов в стиле клавиатуры.

Данный текст делится на абзацы внутри отдельного элемента div, но с помощью CSS3 текст делится на колонки.

Перетаскивайте элементы, выбирайте цвета, создавайте красивые классы для кнопок.

Взгляните на забавные и продуктивные бесплатные утилиты для веб-разработки.

Этот простой генератор кода CSS помогает вам уяснить возможности CSS3, предложенные в рамках WebKit. Данная демонстрация работает в браузерах семейства webkit- (Safari, mobile Safari, Chronium).

Выберите формат, в котором должны быть сгенерированы цвета. Доступные опции включают в себя HEX и RGB.

Информация о параметрах CSS. Значения отражают поддержку элементов браузером. Некоторые параметры могут поддерживаться хуже остальных. Здесь вы сможете узнать уровень поддержки.

С помощью данной утилиты вы сможете проверить – будет ли поддерживаться определенный параметр в браузере. Здесь также есть поддержка параметров CSS3.

Небольшой набор важных для разработки инструментов CSS3.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Скачать бесплатно: Bootstrap-шаблон панели управления (HTML5 CSS3)

CSS3-градиенты

Create CSS3: многофункциональный генератор кода CSS3

Morf.js: пользовательские функции замедления для переходов в CSS3

CSS3 Box Shadows: 39 оригинальных способов применения

Perkins – HTML5/CSS3-платформа для быстрой разработки

Opera развивает поддержку CSS3

Веб-генератор трехмерных лент (основанный на CSS3)

CSS3, Please! – Кросс-браузерный генератор правил CSS3

Шпаргалка по CSS3 (PDF)

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.

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

Какой порядок обучения веб-верстке вы посоветуете?

сейчас прохожу курс на htmlacademy

По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
Git, NPM: без комментариев

А дальше, когда вы будете владеть тем, что нужно везде, уже встанет вопрос о ваших задачах. Существуют тысячи библиотек и фреймворков, каждый из которых хорошо решает одни задачи и плохо решает другие. Расширяйте кругозор и выбирайте инструменты исходя из задач.

Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

Ну и умение задавать вопросы тоже лишним не будет.

30 CSS-селекторов, которые вы должны знать

Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, >

1. * — выделение всех элементов

Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding . На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.

Его также можно использовать для выделения всех дочерних элементов, определенного контейнера.

В данном случае выделяться все дочерние элементы блока #container . Старайтесь не злоупотреблять им.

2. #X

Знак решетки перед CSS-селектором выделит нам элемент с . Это очень просто, но будьте аккуратны при использовании id.

Спросите себя: мне абсолютно необходимо выделение по id?

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

3 .Х

Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.

4. Х Y

CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li . В этом случае используйте этот селектор.

Не следует делать CSS-селекторы вида Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.

5. X

Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul <>

6. X:visited and X:link

Мы используем псевдо-класс :link , для выделения всех ссылок, на которые еще не кликнули.

Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс :visited .

7. Х+Y

Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.

8. Х>Y

Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.

CSS-селектор #container > ul выберет только ul , которые являются непосредственными дочерними элементами div с >. Он не выберет, например, ul , являющиеся дочерними элементами первых li .

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

9. Х

Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.

10. X[title]

В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.

11. X [href=»Foo»]

Все ссылки, которые ссылаются на yandex.ru будут золотыми. Все остальные ссылки останутся неизменными неизменным.

Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.

Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.

12. X [HREF *= «yandex.ru»]

Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, http://yandex.ru/somepage и т.д.

Но что делать, если ссылка ведет на какой-то сторонних и не связанный ресурс, в адресе которого присутствует yandex? Тогда нужно использовать «^»или «&», для ссылки на начало и конец строки соответственно.

13. X[href^=»http»]

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

«^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.

Обратите внимание, что мы не ищем «http://». Это не правильно, поскольку не учитываются адреса, начинающиеся с https://

А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.

14. X [href$=». JPG»]

Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».

15. X[data-*=»foo»]

Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:

Но это геморрой и неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?

Теперь мы можем выделить такие ссылки при помощи данного CSS-селектора:

16. X[foo

А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (

) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

Вот, Html-код на месте, теперь напишем стили.

17. X:checked

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

18. X:after

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

Многие познакомились с этими псевдоклассами при работе с clear-fix hack.


Этот хак использует :after чтобы добавить пробел после элемента, а запретить его обтекание.

Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.

19. X:hover

Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.

Имейте в виду, что старые версии Internet Explorer применяют :hover только к ссылкам.

Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.

border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;

  • IE6 + (В IE6: hover должен быть применен к ссылке)
  • Firefox
  • Хром
  • Safari
  • Опера

20. X:not(selector)

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

Или, если бы я хотел выбрать все элементы, за исключением p.

21. X::псевдоэлемент

Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.

Псевдо-элемент задается двумя двоеточиями: ::

Выбираем первую букву в параграфе

Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.

Выбираем первую строку в абзаце

Аналогичным образом благодаря ::first-line мы задаем стиль первой строки в абзаце.

«Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации» Источник

22. X:nth-child(n)

Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!

Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .

Мы даже можем выбрать каждый четвертый элемент списка, просто написав <0>li:nth-child(4n).

23. X:nth-last-child(n)

Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.

Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.

24. X:nth-of-type(n)

Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.

Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.

25. X:nth-last-of-type(n)

Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.

26. X:first-child

Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.

27. X:last-child

В противоположность :first-child :last-child выбирает последний дочерний элемент.

  • IE9 + (Да да, IE8 поддерживает :first-child , но не поддерживает :last-child . Microsoft-у привет! )
  • Firefox
  • Хром
  • Safari
  • Опера

28. X:only-child

Вы не часто встретите этот псевдокласс, тем не менее он существует.

Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:

Будет выбран p только первого div`a, потому что он единственный дочерний элемент.

29. X:only-of-type

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

Единственное решение заключается в использовании only-of-type .

30. X:first-of-type

first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.

А теперь попытайтесь понять как выделить пункт 2.

Решение 1

Решение 2

Решение 3

18 советов по CSS, которые сделают жизнь разработчика проще

Цвета

Когда вы используете в проекте огромное количество цветов, сложно не запутаться, так как порой отличия бывают незаметными: возьмите #3426D1 и #3426D2 . Для решения этой проблемы достаточно использовать элементарные классы цветов в CSS или SCSS.

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

Другая проблема — баги при использовании альфа-канальных цветов. Обычно такие цвета задаются с использованием функций rgba() или hsla() . Цвет, заданный со значением альфа-канала, отличным от 1, является полупрозрачным. Воспринимаемый цвет теперь меняется в зависимости от того, что находится на заднем плане. Если цвет вам нужен таким, каким он выглядит на белом фоне, лучше использовать hex-значение. Некоторые функции, lighten() в SASS например, сгенерируют полупрозрачный цвет, поэтому лучше придерживайтесь точно закодированных значений.

Типографика

Все свойства, которые влияют или находятся под влиянием шрифта, должны быть объявлены в одном месте, сразу после какого-нибудь @font-face . Также можно добавлять классы для шрифтов, которые меняют font-size (через rem ) и задают те line-height , letter-spacing и word-spacing , которые подходят для заданного шрифта и его размера. После этого нигде не должны использоваться font-* или text-* (за исключением text-overflow ).

9–10 ноября, Великий Новгород, беcплатно

Объявление данных свойств вместе с font-face гарантирует, что страницы сайта всегда будут выглядеть правильно. Настройка line-height вместо padding или margin может вызвать ошибки при обвёртывании текста. А установка font-weight отдельно от всех остальных свойств (стилей), касающихся шрифта, приведёт к faux bold font. Изменение font-style для шрифта, который не поддерживается, тоже ведёт к неправильному его отображению.

Устанавливайте размер шрифта в rem единицах. Использование em приведёт к проблемам при вложении элементов, так как em является скалярным кратным текущему размеру шрифта. px может создать нечитаемый и неадаптивный контент. Позвольте пользователю (или браузеру пользователя) установить подходщий им размер шрифта — не объявляйте размер шрифта в body или элементе html и используйте только rem .

Интервалы

На сайте, где в первую очередь важен контент, интервалы должны гармонично дополнять содержание. Но в некоторых измерениях, как padding: 4px , общий вид будет выглядеть не очень. А любое динамическое измерение, сообщающееся со шрифтом, например padding: .5em , будет хорошо смотреться во всех случаях.

Для интервалов используйте em .

Инструмент CSS Grid Layout

CSS Grid очень хорошо поддерживается (возвращаясь к IE10) и позволяет организовывать контент без добавления контейнерных элементов наподобие Bootstrap-row или Bootstrap-col. Дизайнеры часто работают с 12-колонной сеткой, и CSS-фреймворки следуют этому. Но сетки, как и интервалы, должны организовывать контент, а не ограничивать его. Сетки не должны быть заранее заточены под определённый формат. Не стоит целиком полагаться на сетку.

Выравнивание текста

text-align используют для выравнивания не только текста, но и других элементов. Но для этого лучше подходит flexbox . В некоторых языках, которые пишутся справа налево или вертикально, свойства left и right могут работать некорректно. В случае с justify проблемы могут возникнуть с языками, где есть орграфы. Также он может доставить неудобства людям с дислексией. Каждый из этих вариантов решается flexbox . Поэтому для таких случаев всегда используйте его.

Свойство outline

Границы выделенных элементов — это то, как браузер взаимодействует с элементами, находящимися в фокусе. Хотя дефолтные границы достаточно хороши, всё равно их часто либо изменяют, либо вообще убирают, просто потому что они не сочетаются с дизайном. И если вы всё-таки решили не использовать оригинальный outline , запомните: пока вы не заменили свойство чем-нибудь другим, не удаляйте и не аннулируйте его.

Псевдоклассы :focus и :hover

Как упоминалось выше, менять значение :focus не рекомендуется, так как оно выступает в роли индикатора для элемента, который в данный момент находится в фокусе. При добавлении стилей :hover не используйте псевдоселекторы для демонстрации дополнительного контента, если вы не проделали то же самое для :focus . Обычно, но не всегда, полезно использовать :hover и :focus псевдоселекторы одновременно для одних и тех же стилей (но будьте осторожны, добавление focus-селектора на hover-стили, например для кнопки, может вызвать эффект залипания).

Непрозрачность

Устанавливая opacity на ноль, вы фактически не скрываете элемент от инструментов специальных возможностей. Он до сих пор находится в документе, и его может найти любой желающий. Это свойство действительно требуется только в двух случаях: когда элемент появляется в поле зрения (быстрое изменение opacity c 0 до 1) и при стилизации наложения диалогового окна (таким образом содержимое под окном ещё немного заметно). Избегайте наложения полупрозрачных слоёв, так как уровень прозрачности (opacity) накапливающийся. Контент, находящийся под двумя элементами с opacity: 50% , будет выглядеть так, будто он находится под одним элементом с opacity: 25% .

Селекторы

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

Производительность CSS-селекторов в современных браузерах — вопрос не первой важности, возможно, вы слышали об универсальном селекторе (*). О чём действительно стоит беспокоиться, так это о слишком большом охвате этого селектора. В будущем это может повлечь больше неудобств, чем пользы. Использование селектора вроде .my-class > в конечном счёте потребует от вас выбрать какой-нибудь дочерний класс, так что вам придётся добавлять другие классы и направлять этот селектор на них.
Тот же самый аргумент можно привести в пользу неиспользования type-селекторов ( div , main ), которые скапливаются в больших количествах и требуют добавления некоторых идентифицирующих свойств div.some-class . Вот такие множественные селекторы более специфичны, и вероятность багов меньше.
То же самое с селекторами .class , [attribute] и :focus .

Чрезмерная точность

Селекторы бывают не только слишком общими, но ещё и слишком специфичными — два конкретно запарных случая. Чрезмерно специфичные селекторы порождают ещё более специфичные селекторы. Каждый последующий из них становится препятствием при изменении стилей элемента, что в конце концов приводит к хрупким таблицам стилей, с которыми никто не хочет работать.

В CSS есть встроенная специфичность — порядок (очередь) resultset’ов. Это каскад в каскадных таблицах стилей. Исходя из этого, можно выдавать resultset’ы в порядке возрастания по их значимости, без увеличения уровня специфичности селектора. Например:

В этом примере каждый последующий классовый селектор более специфичен, чем предыдущий, таким образом устраняется необходимость объявлять стили для .btn.btn—primary or .btn.btn—primary—light .

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

Свойство text-transform

Для сайтов, которые поддерживают какие-либо языки, помимо английского, со свойством text-transform могут возникнуть проблемы. Бывает, браузеры подставляют ненужный символ для преобразования нижнего и верхнего регистра. Чтобы это не случилось, не юзайте text-transform .

Свойство z-index

Если в стилях присутствует любой z-index , обязательно будет ещё два свойства, которые объявляют z-index: 9999; и z-index: 99999; . При попытке использования атомарных классов или переменных для ограничения количества допустимых z-index без метода calc() и SCSS-математики не обойтись, поскольку придётся изменять значение переменной.

В большинстве случаев, если не во всех, z-index можно заменить изменением структуры HTML для натуральной укладки элементов (чем глубже элементы в верстке — тем выше они в отображении) или добавлять к элементу или его родителю новый контекст наложения.
В общем, избегайте z-index .

Псевдоэлементы

Иногда с псевдоэлементами ::before и ::after можно поиграться, многие стилистические фичи основаны именно на этих двух псевдоэлементах, и пока они пустые (без контента), всё выглядит вполне сносно. Проблема с размещением контента в этих элементах заключается в том, что не все устройства способны справляться с нагрузкой. Так что не размещайте в них ничего.

Псевдоэлементы ::first-letter и ::first-line не работают так, как вы могли предполагать. Они действуют лишь на первый символ/строку в блоке. С ::first-line , бывает, возникает ошибка с двухбайтовыми символами, такими как Japanese Kana, и орграфами.
С управлением стилями выделенного текста или placeholder’а, осуществляемого с помощью ::selection или ::placeholder , зачастую возникают проблемы. С ::placeholder всё просто: не используйте его. Это особенно важно для полей ввода паролей и т.п.

При выделении текста и измении стиля (обычно color и background-color ) возникают коварные баги. Пока дефолтные цвета выделения, не совместимые с браузерами и устройствами, недостаточно контрастны и не так сочетаются с цветом и стилем текста на вашем сайте, пользователи частенько переписывают их для лучшей читабельности. Изменение цветов в этом случае либо не будет работать, либо будет мешать их стилям (если вы пользовались !important ). Использование этого псевдоэлемента для красивой картинки может обернуться недовольством посетителей вашего сайта.

Переходы и анимация

transitions и animations в CSS отличаются от opacity и transform тем, что после их выполнения браузер заново перерисовывает всю страницу. На мощном компьютере это никак не заметно, но на простеньких телефонах и ноутбуках всё выглядит криво. Плохая анимация смотрится хуже, чем её отсутствие.

Медиа-запрос prefers-reduced-motion

Создание красивых ненавязчивых анимаций — нелёгкое дело. С появлением медиа-запроса prefers-reduced-motion управлять анимацией на странице стало намного проще, к тому же он помогает сделать страницы безопаснее для людей, страдающих расстройствами вестибулярного аппарата. Данный скрипт останавливает выполнение всех анимаций, если автор не включает класс safe-animation в элемент.

Сброс стилей

Хорошо использовать немного улучшенную версию Meyers reset. Несколько аспектов удалены из reset’а, например списки иконок ol и ul элементов, которые могут привести к тому, что начнут объединяться вещи одинаковые по представлению, но разные по происхождению. Также в этой версии отсутствует установка line-height в body на 1, ведь всё зависит от шрифта и впоследствии могут возникнуть непредвиденные ошибки. В этом reset’е есть вещи, упомянутые выше. В CSS не добавляется атомарный класс .hidden , потому что есть лучшее решение, которое будет работать, даже если CSS не подгрузится, — hidden-атрибут. Обычно на скрытые элементы браузер выставляет display: none , но это тоже можно изменить.

Исходники reset’a — https://github.com/NickGard/css-utils/blob/master/reset.css.
Ещё одна полезная штука — это класс visually-hidden . Вместе с aria-label для невидимого читаемого с экрана текста нужно использовать следующий блок кода:

Наименования в соответствии с методологией BEM

BEM, пожалуй, лучший способ именования элементов, и читается он легко — сразу понятно, к какому типу кнопки относится данный элемент. Маленькое отступление от стиля BEM , но это довольно-таки удобно, сразу видно, что второй класс базируется на первом. При этом CSS выглядит так :

В SCSS вы можете достигнуть подобного эффекта, используя @extend .

Добавить комментарий