.row:hover {
// Next row, slides are above their columns, giving downward motion on hover
& ~ .row .slide { transform: translateY(-100%); }
// Current row, slides to the right of their columns, giving left motion on hover
.slide { transform: translateX(100%); }
// Current row, next slides, slides to the left of their columns, giving right motion on hover
& .col:hover ~ .col .slide { transform: translateX(-100%); }
// Current slide
.col:hover .slide {
transform: none;
visibility: visible;
transition-delay: 0s;
}
}:indeterminate { background: limegreen; }
:indeterminate + span { background: limegreen; }li:has(~ .hover:hover) {
color: red;
}* {
overflow-x: hidden;
}section ... .application input гораздо более специфичный, чем просто .application input, поэтому правила перекрываются.Не работают медиа запросыМедиа-запросы работают, проблема в другом.
браузер жалуетсяНе жалуется, а наглядно показывает, какие правила применяются, почему и откуда они взялись.
выше (не в медиа даже) указаны другие свойстваСвойства могут быть указаны и ниже по коду, браузер в этой панели сортирует правила по специфичности селектора.
Что это за бордер при клике?https://webref.ru/css/outline
как сделать заполнение не квадратное?Не видя код ответить невозможно.
свои сайты не могу выложить по причине того, что уже отсидел в бане за это целых два месяцаПосмотрел ваши вопросы и ответы - не вижу ничего криминального, кроме выкладывания ссылки на сайт через сокращатель зачем-то. В любом случае, вы совершенно спокойно можете подключить на jsfiddle все ваши css, создать минимальную разметку и проблема станет воспроизводиться и там.
.foo ol {}
<div class="foo">
<ol>
<li>...</li>
</ol>
</div>ol.foo {}
<div>
<ol class="foo">
<li>...</li>
</ol>
</div>.foo назначен одному элементу, в другом другому.<ol>, находящимся внутри элементов с классом .foo, а в другом элементам <ol> в то же время имеющим класс .foo.
.guest {
body {
background-color: green;
}
}
.user {
body {
background-color: yellow;
}
}<html class="<?= $isGuest ? 'guest' : 'user'; ?>">
...
</html>Хочется сэкономить немного времени на разработку - есть ли готовые библиотеки которые будут определять ширину экрана, устройство, портретный/альбомный виды?Есть.
Это вообще возможно? (средствами php, html, css ну и js может быть но не знаю зачем он здесь)Возможно, но технически это довольно сложная задача. В вашем случае я рекомендую воспользоваться новым инструментом анализа использования CSS в Chrome DevTools. Это ручная работа, но так вы получите хоть какой-то эффект при относительно небольших усилиях.
Так кто нибудь делал / делает?В принципе, да, но область применения у такого подхода невелика. Делать это на лету точно не стоит и обычно пользуются утилитой uncss, натравливая её на исходные файлы. Но при этом очень важно выбрать корректный набор страниц, чтобы не вырезать нужное или не оставить много лишнего.
Даст ли это ощутимый прирост производительности?Нет, это убьёт производительность ещё сильнее, особенно на дешёвом хостинге. Прежде чем применять такие сложные решения, я вам рекомендую разобраться, а что у вас реально тормозит загрузку. Действительно ли проблема в css? Скорее всего, нет.
Так вот на момент передачи заголовков тело ещё не загружено, значит придётся подключать css в body - это возможно тоже будет влиять на скорость.Тег head и заголовки - это разные вещи. Вполне можно реализовать эту задачу и добавить стили в head. Но, судя по формулировке вопроса, у вас сильно не хватает знания для решения этой задачи и вы скорее отстрелите себе ногу, потратив на это кучу времени (не пытаюсь вас обидеть, просто констатирую факт).
Ещё, читал, что стили нужно подключать именно в header а не в body, причин не знаю.Это не обязательно и в некоторых случаях часть стилей стоит подключать именно в body. Но это отдельная очень большая тема - поищите статьи на тему оптимизации рендеринга страницы, начните с этой.