Полезные моменты по селекторам CSS
1. Высоту задавать только в пикселях.
2. Атрибут position:absolute относителен родительскому блоку с атрибутом position: .
3. .class1_.class2 — класс2 внутри класса1, если без пробела, то правила распространяются при наличии у элемента обоих классов. Второй способ не предпочтителен, т.к. в development tools данный стиль не появляется.
4. Заголовки пишем всегда с заглавной буквы далее строчными — Заголовок. Все строчные мы можем сделать заглавными стилем — ЗАГОЛОВОК, обратно сложнее.
5. Для теней лучше использовать черный цвет с процентом прозрачнсти rgba(0, 0, 0, 0.5)
6. Плавное появление/исчезновение псевдоэлемента при наведении курсора (кроссбраузерно)
<span class="pic-url"><a href ="<?php echo get_attachment_link(); ?>"><i class="fa fa-pencil-square-o"></i></a></span>
.pic-url {position: absolute; left: 10px; top: 10px;}
.pic-url a .fa {color: #fff;}
.pic-url:after {
opacity:0;
content: "комментировать";
color: #fff;
transition: opacity .3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out 0s;
}
.pic-url:hover:after {
opacity:1;
content: "комментировать";
color: #fff;
}7. Для того чтобы цвет маркеров отличался от текста в списке, нужно текст оборачивать в span и задавать другой стиль тексту.
8. Равномерное распределение колонок-блоков. Блоку контейнеру задаем свойства (кроссбраузерные):
-webkit-column-count: 5; -moz-column-count: 5; column-count: 5;
Число (5) — это необходимое количество колонок.
Содержащиеся в контейнере блоки должны быть со свойствами:
width: 100%; display: inline-block;
И еще один момент: при использовании свойства column-count в колонках (кроме первой) пропадают маркеры. Чтобы этого избежать, самим пунктам (li) нужно добавлять свойство list-style-position: inside;. Минусом является то, что маркеры некорректно выравниваются, если в пункте больше одной строки.
9. Создаем перечеркнутый круг вокруг изображения:
<div class="icon red"><div class="line-red"></div><img src="картинка" ></div>
.icon {position: relative;}
.line-red {
width: 85%;
border-bottom: 8px solid #ff5722;
-webkit-transform: rotate(-35deg);
position: absolute;
margin-top: -4px;
top: 50%;
left: 0;
margin-left: 15px;
}
.icon.red img {border: 8px solid #FF5722;}
.icon img {border-radius: 100px; width: 80%;}10. Класс не должен начинаться с цифры!
11. При верстке сайта стараться делать margin вниз и направо.
12. Зачастую использование свойства display: inline-block более оправдано чем float: left. Например для меню, для иконок соц.сетей, для повторяющихся элементов. Между элементами со свойством display: inline-block появляется пробел. Есть 2 простых метода устранить это: первый, ставить элементы вплотную без пробелов. Второй способ: не закрывать тэг, этот способ подходит для определенных элементов (p, li, td и пр.).
Либо если тэги должны быть закрытыми (div), то расстояние между элементами должно быть заполнено комментированием:
<div><!-- //родительский div
--><div> блок 1 </div><!--
--><div> блок 2 </div><!--
--><div> блок 3 </div><!--
--></div>13. В верстке любого сайта следует руководствоваться практичностью использования того или иного элемента. Не должно быть ничего лишнего. Данный принцип особенно актуален при проектировании мобильных версий.
14. list-style-image с пользовательским изображением выравнивается по вертикали не корректно. Вместо этого лучше делать свойство background:
.area ul li, .area ol li {
margin: 5px 0;
padding-left: 20px;
list-style-type: none;
background: url(images/doth.gif) no-repeat left center;
}15. Селекторы для специальных ссылок:
a[href^="mailto"] { }
a[href^="tel"] { text-decoration: none !important; cursor: default; color: #000; }16. Мутные (размытые изображения) исправляются свойством
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;12. Два и более transform прописываются в одно свойство: transform: rotate(15deg) translate(-20px,0px);
13. Пустой элемент (без какого либо содержимого) обозначается псевдоклассом :empty. Данный псевдокласс удобно также использовать и в jquery.
14. Использовать background, а не background-color.
15. Прописываем всем изображениям img {display: block;} тогда они будут плотно прижаты к низу.
16. Тень для png изображений:
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);17. Непереносимость текста (например телефона в шапке): white-space: nowrap;
18. Простой эффект обводки:
#news ul li {outline: transparent solid 4px;}
#news ul li:hover {outline-color: #fff;}19. Ширина подпунктов меню. Если относительно родительского пункта пункты подменю получаются шире (длиннее текст) и начинают съезжать строки, то нужно подпунктам прописать свойство:
#site-menu ul.sub-menu li {width: 100%; white-space: nowrap;}20. Если блок с position: fixed; ведет себя как position: absolute; то в родительском блоке есть стиль transform: translate, который влияет на это.
21. Предпоследний элемент. Свойство :nth-last-child() это свойство :nth-child() только с конца, т.е. :nth-last-child(2) — второй элемент с конца.
22. Блок контактов над картой. Чтобы карта была доступна для манипуляций мышкой, то над слоями над картой нужно установить свойство pointer-events: none; а на блоке с контактами свойство pointer-events: auto;
23. Если на первом экране делаем иконку прокрутки до следующего блока. Можно сделать универсальную ссылку на следующий невидимый блок, чтобы не привязывать к ID конкретного блока, который может быть разным на разных сайтах.
<a href="#toscroll"><img src="/wp-content/uploads/2021/01/scroll-mouse-light-b.gif"></a>
<div id="toscroll"></div>24. text-overflow: ellipsis; Обрезанный oferflow: hidden текст в конце обрезается […].
25. Новые интересные селекторы CSS
Элемент p содержит элемент strong:
.menu-contacts p:has(strong) {
margin-bottom: 30px;
}Класс элемента содержит слово:
*[class*="cell"] img {
width: 100%;
display: block;
}ID элемента содержит слово:
.product[id*='product'] {
display: grid;
}
