ZorNet.Ru — сайт для вебмастера » HTML и CSS » 20 способов для написания современного CSS

20 способов для написания современного CSS

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

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

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

1. Использование сброса CSS

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

Код

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

С помощью box-sizing декларации не является обязательным – если вы будете следовать наследовать коробка-калибровка наконечника ниже, где можете пропустить его.

2. Наследовать box-sizing

Давайте box-sizing быть унаследованы от html:

Код

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Это делает его легче изменить box-sizing , когда код вводится через 3-сторонних плагинов или приложений, использующих различное поведение.

3. Избавиться от margin Hacks с Flexbox

Сколько раз вы пытались разработать сетку, такую как портфолио или Галерея изображений, где Вы использовали поплавки, а затем должны были очистить их или сбросить поля, чтобы столбцы разбились на количество строк, которые вы хотите? Избавиться от энного-первых и последних-ребенок хаки с помощью space-between свойства value в основе:

Код

.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-container .item {
  flex-basis: 23%;
}

Теперь сточные канавы столбцов всегда отображаются равномерно.

4. Стиль границы по спискам

Очень распространенной практикой в веб-дизайне было использование :Last-child или: nth-Child селекторы для отмены стиля, ранее объявленного на родительском селекторе. Подумайте о меню навигации, которое использует границы для создания разделителя между каждой ссылкой и второе правило добавленное, чтобы снять эту границу с конца.

Код

.nav li {
  border-right: 1px solid #666;
}
.nav li:last-child {
  border-right: none;
}

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

Код

.nav li:not(:last-child) {
border-right: 1px solid #666;
}

Это говорит, поставить границу на все .nav элементы списка, кроме последнего.

Конечно вы можете также использовать .nav li + li или даже .nav li:first-child ~ li, но :not() всегда будет больше смысловой и легко понять.

5. Добавить line-height в body

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

Код

body {
line-height: 1.5;
}

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

6. Вертикальное выравнивание в CSS

Код

html, body {
  height: 100%;
  margin: 0;
}
body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

Мы вдаваться в подробности обо всех способах вы можете вертикально-центров в CSS.

7. Использование SVG иконок

Хорошо SVG масштабируется для всех типов разрешений и поддерживается во всех браузерах. Даже FontAwesome теперь предлагает SVG Icon Fonts In FontAwesome.

Код

.logo {
background: url("logo.svg");
}

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

Код

.no-svg .icon-only:after {
content: attr(aria-label);
}

Настройка SVG работает так же, как и любой другой тип изображения.

8. Использование селектора Owl

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

Код

* + * {
margin-top: 1.5rem;
}

Это еще один отличный трюк, который может помочь вам создать более однородный тип и интервал. В приведенном выше примере все элементы, что следуют за другими элементами, такими как H4, которые следуют за H3 или абзац следующий за другим абзацем, будут иметь как минимум 1.5 rems пространства.

9. Согласованный вертикальный ритм

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

Код

.intro > * {
margin-bottom: 1.25rem;
}

10. Использование box-decoration-break для более сжатого текста

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

Код

.p {
  display: inline-block;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

В inline-block декларации позволяет цвет, фон, отступы и отступы должны быть применены к каждой строке текста, а не весь элемент, а clone заявления делает, что эти стили применяются последовательно в каждой строке одинаково.

11. Ячейки таблицы с равной шириной

Таблицы могут быть боль, чтобы работать с, так что попробуйте использовать table-layout: fixed для удержания клеток при равной ширине:

Код

.calendar {
table-layout: fixed;
}

12. Настроить пустые ссылки с помощью селекторов атрибутов

Это особенно полезно для ссылок, которые вставляются через CMS, что обычно не имеют атрибута класса и помогают вам стилизовать их специально, не влияя на каскад. Например, A элемент имеет текстовое значение, но href атрибут ссылку.

Код

a[href^="http"]:empty::before {
content: attr(href);
}

13. Стиль "Default" для ссылок

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

Код

a[href]:not([class]) {
  color: #999;
  text-decoration: none;
  transition: all ease-in-out .3s;
}

Теперь стиль будет применяться только к ссылкам, которые иначе не имеют другого правила стиля.

14. Коды с внутренним коэффициентом

Чтобы создать коробку с внутренним соотношением, все, что вам нужно сделать, это применить верхнее или нижнее дополнение к div.

Код

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}
.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Использование 20% для заполнения делает высоту окна равной 20% от ее ширины. Независимо от ширины окна просмотра дочерний div сохранит пропорции.

15. Разбитые стили изображений

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

Код

img {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}
img:before {
  content: "We're sorry, the image below is missing :(";
  display: block;
  margin-bottom: 10px;
}
img:after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

16. использовать rem для глобальных размеров и em для местных размеров

После установки базового размера шрифта в корневом каталоге, например html{font-size: 15px;}, вы можете установить font-size для содержащих элементы rem:

Код

article {
  font-size: 1.25rem;
}
aside {
  font-size: .9rem;
}

Затем установите размер шрифта для текстовых элементов в em:

Код

h2 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

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

17. Скрыть видеоролики авто запуска, которые не отключены

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

Код

video[autoplay]:not([muted]) {
display: none;
}

18. использование :root для гибкого типа

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

Код

:root {
font-size: calc(1vw + 1vh + .5vmin);
}

Теперь вы можете использовать корневой em агрегата в зависимости от значения, рассчитанного по :root:

Код

body {
font: 1rem/1.6 sans-serif;
}

Объедините это с трюком rem и em выше для большего контроля. Смотрите CSS исправить для iOS в блок жучок для советов по управлению старых версиях Safari.

19. Набор font-size на форму элементы для мобильного опыта

Чтобы избежать мобильные браузеры (iOS в Сафари и так далее) от масштабирование элементов формы HTML при select раскрывающийся постучал, добавить font-size к входным стили.

Код

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

20. Используйте переменные CSS

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

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

Например:

Код

:root {
  --main-color: #06c;
  --accent-color: #999;
}

h1, h2, h3 {
  color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
  color: var(--accent-color);
}

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

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

01 Августа 2018 Просмотров: 1164 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0