•  
  •  
  •  
  •  
1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 (1 Голос)
"Умные" настройки CSS - 5.0 out of 5 based on 1 vote

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

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

1. Использование псевдо-класса :not

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

/* добавляем рамку */
.nav li {
  border-right: 1px solid #666;
}

 

 

А также обнулите border для последнего элемента:

/* удаляем рамку */
.nav li:last-child {
  border-right: none;
}

 

 

Или возможно использовать просто тот же самый псевдо-класс :not(), чтобы выбрать необходимые элементы: 

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

 

Безусловно, можно также воспользоваться кодом .nav li + li или .nav li:first-child ~ li, но при использовании :not() границы всех элементов, кроме последнего, уже определены в CSS. Таким образом становится понятно, что произойдет с данным элементом. Данный способ поддерживается как IE9+, так и остальными браузерами.

2. Добавление межстрочного интервала в body

Чтобы не выставлять высоту строки для каждого отдельного параграфа и заголовка самостоятельно (<p> и <h>), можно добавить вот такой код в тело элемента body: 

body {
  line-height: 1;
}

 

 

Все остальные элементы текста унаследуют данное свойство от родительского элемента body.

3. Центрирование по вертикали

С помощью данного кода вы сможете центрировать по вертикали любой элемент:

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

 

 

Пример поддерживается IE11+ и остальными браузерами. Однако, необходимо все-таки контролировать баги (ошибки) flexbox в IE11, а также сам процесс html-верстки.

4. Правильно разделяем запятыми элементы списков

Элементы li могут быть использованы так, чтобы они смотрелись как настоящий список, разделенный запятыми:

ul > li:not(:last-child)::after {
  content: ",";
}

 


С помощью псевдо-класс :not(), после всех элементов ul-списка, кроме последнего, добавляется запятая.

5. Установка отрицательного порядкового номера в nth-child

Это возможно, когда вы воспользуетесь отрицательным аргументом в nth-child для выбора сегментов с 1 по n:

li {
  display: none;
}

/* выбираем элементы с 1 по 3 и отображаем их */
li:nth-child(-n+3) {
  display: block;
}

 

Это также можно сделать с помощью псевдо-класса :not():

/* скрываем все элемента ul-списка, кроме элементов с 1 по 3 */
li:not(:nth-child(-n+3)) {
  display: none;
}

 

6. Использование SVG-логотипов

Код ниже:

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

 

Масштабирование в SVG работает отлично для любого разрешения экрана, а также поддерживается всеми браузерами. Таким образом можно использовать .svg, вместо .png, .jpg, или .gif-файлов. 

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

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

 

7. Аксиоматический CSS

Так называемая "лоботомированная сова" (или аксиоматический СSS), используя универсальный селектор (*) и одноуровневый селектор (+), открывает широкие возможности в CSS:

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

 

В частности, данный код прописывает, что все элементы, расположенные после другого элемента, будут иметь верхний отступ равный 1.5em. 

8. Установка максимальной высоты у CSS-слайдера

Сделать это можно с помощью кода ниже и использования max-height и overflow:hidden:

.slider ul {
  max-height: 0;
  overflow: hidden;
}

.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease; /* анимация для max-height */
}

 

9. Унаследование box-sizing

box-sizing может наследоваться от html, что облегчит его (box-sizing) контролирование в плагинах или компонентах, поддерживается всеми браузерами:

html { 
  box-sizing: border-box;
}

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

 

10. Установка одинаковой ширины ячеек в таблице

Используйте код ниже:

.calendar {
  table-layout: fixed;
}

 

11. Установка динамических внешних отступов с flexbox

Избавить от css-селекторов nth-*, first-*, и last-child при работе с колончатыми макетами можно, используя flexbox значения space-between:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%; /* базовый размер отдельно взятого блока */
}

 

 

12. Использование селекторов атрибутов пустых ссылок

С помощью данного коды вы сможете отобразить ссылки, когда у a-элемент отсутствует текстовое значение, а у атрибута href есть ссылка:

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

 


13. Добавление стилей по умолчанию для обычных ссылок

Код ниже:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

 

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

Портфолио
Память о Вас и Ваших близких на многие поколения
Подробнее
Прокат металла
Подробнее
Интернет-магазин кожи и меха
Подробнее
100% оригинальная парфюмерия в Москве
Подробнее
Вьетнамский ресторан премиум класса
Подробнее
Внедрение информационных систем
Подробнее
Организация международных конференций
Подробнее
Производство молочной продукции
Подробнее
Спортивный сайт
Подробнее
Интернет-магазин мебели и аксессуаров
Подробнее
Интернет-магазин электротранспорта
Подробнее
Сайт института актуальной экономики
Подробнее
Наши клиенты
Парк развлечений Boom Zoom
Алгор
Норбит
Molga Consulting
Metrotile
Нетология
Monqi
Премиум Пак
Aasha Herbals
Аджва
Салон красоты Сударушка
Пава
ТЦ &quot;Панфиловский&quot;
Фитнес Лаборатория
Система Главбух
Vanguard
GoAsia
ТЦ «Солнечный ветер»
Teledoc
Tchernov Cable
Отзывы
Благодарю компанию web-now.pro за помощь в разработке и запуске проекта POLITSECRETS.RU. Перед нами стояла задача – внедрить проект в сжатые сроки и по оптимальной цене. Порадовало то, что мне подроб...
Вера БлашенковаСекреты успешных выборов, Москва... апр.2016
Мне очень понравился подход с которым нас встретили "Ваша задача заниматься бизнесом, наша - сделать Вам представительство в сети". После этого ребята разработали полное тз на проект, мы внесли пожела...
МаксимIT-TASK, Москва... янв.2016
Работа проделана хорошо! Дизайнер и менеджер на отлично. Надеюсь на сотрудничество в дальнейшем. Есть шероховатости в деталях по задачам, но приятно сказывается оперативность и желание исправить, внес...
БруноСоциальная сеть След Жизни, Москва... янв.2016
Работой остались очень довольны. К работе подходят ответственно, аккуратно, открыто. Проект был сдан чуть раньше срока, по ходу работы возникали изменения, все они принимались безоговорочно, работа вы...
ЕвгенийМагазин текстиля, Москва... дек.2015
Сотрудничаем с 2007 года и сделали не один проект. Самое главное - команда умеет отстаивать своё мнение и постоянно развивается.
МарияМеждународные конференции, Москва... дек.2015
Спасибо всему коллективу компании! Разработали красивый и что самое главной рабочий интернет магазин! Реклама настроена и запущена, продажи идут, бизнес развивается! Нам постоянно подсказывают о новых...
ВадимИнтернет магазин Aromatic.pro, Москва... сен.2015
Большое спасибо команде за оперативность, качественные работы, отличный креатив и привлекательные цены!
Виктория, ОАО "Фармстандарт... июль.2015
Здравствуйте уважаемые партнеры! С наступающим Новым Годом! Желаю Вам дальнейшего процветания и успехов в Вашей благородной работе! С вами приятно сотрудничать! Очень благодарен Вам за своевременное о...
Сергей ЮрченкоКинотруд, Москва... дек.2014
Благодарим команду Brand Now и лично Дениса Логинова за оригинальное видение,разнообразие идей, четкость взаимодействия и безукоризненное соблюдение сроков выполнения проекта! Планируем продолжить сот...
ТатьянаBizness Linkerz... июль.2014
Компания КУН выражает благодарность за сотрудничество: непростая задача была выполнена в требуемые сроки и полностью удовлетворила заявленному ТЗ. Приятно удивила готовность Генерального директора нач...
Мария, Компания КУНhttp://www.kuhn.com/... апр.2014
Все отзывы
Добавить отзыв