CSS сниппеты

14.03.2018г.
Веб-разработка
12510

Время на прочтение: < 1 минут

Сниппет (англ. snippet — отрывок, фрагмент) — фрагмент исходного текста или кода программы, применяемый в: поисковых системах, текстовых редакторах и средах разработки.

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

/* выбираем все ссылки на zip-файлы (нечувствительно к регистру)*/
a[href$=".zip" i] { }

/*сделаем красными ссылки на google.com*/
[href*="google.com"] { color: red; }

Этот приём может оказаться полезным при отладке, например, для выделения всех элементов img с пустым атрибутом alt:

img:not([alt]) {
 border: 2px dashed red;
}
img[alt=""] {
 border: 2px dashed red;
}

когда имеется множество элементов одного вида, между которыми должен быть отступ, причём, после последнего элемента такого списка отступ не нужен:

li + li {
 margin-top: 1rem;
}
// вместо
li {
 margin-bottom: 1rem;
}
li:last-of-type {
  margin-bottom: 0;
}

Убрать оранжевую рамку в Chrome

input, textarea {outline:none;}  
input:active, textarea:active {outline:none;} 
:focus {outline:none;}

Запрет на изменение размеров форм textarea

textarea {resize:none;}  
textarea {resize:vertical;}  
textarea {resize:horizontal;}

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

a[href*="facebook"] {
   color: blue;
}

Если вы хотите выбрать все контейнеры кроме футера, используйте:

div:not(.footer) {
   margin-bottom: 40px;
}

Чтобы убрать границу у первого пункта меню и отступы у последнего, необходимо:

ul li:first-child {  
   border: none;  
}     
ul li:last-child {  
   margin-right: 0px;
}

методикa вертикального выравнивания, называемой «douchebag vertical align»:

.element {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

Показывает интерактивное всплывающее меню при наведении указателя мыши:

 <div class="reference">
  <div class="popout-menu">
    Popout menu
  </div>
</div>

.reference {
  position: relative;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
}
.reference:hover > .popout-menu {
  visibility: visible;
}