Комментарии 52
Это перевод. Но претензию можно (и нужно) адресовать оригиналу. В принципе, проект опенсорсный и общая идея хорошая, надеюсь, общими усилиями со временем допилим!
А пока что можно вносить уточнения тут в комментариях. Например, по подводным камням многострадального «клиарфикса» и его «друзей» осмелюсь нескромно предложить этот наглядный пример и сводную таблицу таких «камней»...
Не только. Они, похоже, имеют в виду, что это не что-то нестандартное. Но хак (в случае того же многострадального клиарфикса, например) от стандартности применяемых средств хаком быть не перестает, и может аукнуться, например, если контейнеру с на всякий случай стоявшим клиарфиксом, кто-нибудь захочет задать flex или grid...
Выдвигающееся (popout) менюпросто вреден с точки зрения доступности контента: пользователи без мышки (например, владельцы смартфонов и планшетов) просто никак этот контент не увидят.
Можно использовать не только :hover, но и :focus для отображения подсказки.
В кавычки не нужно брать…
А за что минус влепили? Стандарт ведь кавычек действительно не требует...
Имена шрифтов кроме общих семейств (т.е. ‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, и ‘monospace’) должны быть либо в кавычках как строки, либо без кавычек как последовательность из одного и более идентификаторов.
… хотя, правда, и рекомендует ставить их «для ясности»:
Во избежание ошибок в экранировании, рекомендуется брать в кавычки имена шрифтов, содержащие пробелы, цифры и знаки пунктуации кроме дефиса
Опять эти треугольники бордюрами. SVG ещё не изобрели?
Градиент при избыточной прокрутке
В этом примере я бы ещё добавил
.overflow-scroll-gradient::after {
…
pointer-events: none
}Что бы можно было кликнуть "сквозь" псевдоэлемент.
Посмотрел оригинал, там pointer-events: none имеется.
так в начале поста же есть: https://atomiks.github.io/30-seconds-of-css/
Зачем-то закодирован SVG в base64
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);а можно было написать так
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.414'><path d='M12 12l12 12H0l12-12z' fill='white'/></svg>")Короче и понятнее.
…и становится видно, что атрибуты fill-rule, clip-rule, stroke-linejoin и stroke-miterlimit тут ни на что не влияют, и их можно смело выкосить.
Короче и понятнее, но, к сожалению, не кроссбраузернее. Но есть еще такой вариант:)
А насчет кроссбраузерности — вот к примеру в этом сервисе iconizr.com — были явные косяки с отображением спрайта — в ФФ видно в Хроме через один, но, если через него-же взять css где запилено как в примере (только не base64) — везде был порядок в браузерах.
Если инлайново в html вставить, то да можно манипулировать свойствами svg из css. А если задать его бекграундом, как в примере, то такой фокус уже не пройдёт.
sans-serif — запасной шрифт без засечекsans-serif является семейством шрифтов, но не самим шрифтом
Красивое подчёркивание текста
Не знаю, кому нужно подобное подчёркивание, а вот то, что при решении используется гораздо более полезное создание контура вокруг текста — на этом можно было акцентировать больше внимания. Причём контур растёт не от середины границы букв, а наружу, что делает его лучше, чем граница с помощью эффектов CSS. Правда применимость несколько ограничена из-за квадратности, с крупным кеглем результат может выглядеть неидеально.
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtb
SVG — один из форматов, который отлично встраивается в data URI в CSS без base64. Экранировать нужно только кавычки (что обычно ненужно, так как снаружи и внутри можно использовать разные кавычки), символ "#" и, возможно, ещё что-то. Разбиение на строки тоже возможно. В результате можно получить полностью читаемый и редактируемый SVG внутри CSS.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
С подобными выкрутасами надо быть поосторожнее, потому что у разных шрифтов могут быть разные "размерности", ну а для тех, кто пишет pre { font-family: "Courier New", sans-serif; } запасён отдельный котёл в аду. Привет, Хабр.
Круто, спасибо за статью!
Народ, не перегоняйте SVG в base64, SVG — и так текстовый формат, скорее всего вы только хуже сделаете.
«метод padding-bottom»
Его описание неправильное.
Проценты падинг будет получать не от самого себя а от родителя.
Как вариант можно использовать псевдоэлемент:
.constant-width-to-height-ratio {
background: #333;
width: 50%;
&:before {
content: '';
display: block;
padding-top: 50%;
}
}
В вашем случае получится прямоугольник с соотношением 2:1
codepen.io/anon/pen/MQRoKL
Чтобы работало правильно — надо чтобы у `::beforе` padding-top был 100%
Разделитель
Использует SVG-форму для разделения двух разных блоков, чтобы получилось визуально более интересное отображение на экране по сравнению со стандартным горизонтальным разделением.
SVG не обязательно встраивать в CSS. Можно обойтись только HTML:
<!-- Внутри HTML-файла -->
<svg width="100%" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" class="sawEdge">
<defs>
<pattern id="sawPattern" x="50%" width="20" height="10" patternUnits="userSpaceOnUse">
<path d="M 0 0 L 10 10 L 20 0 Z"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="10" fill="url(#sawPattern)"/>
</svg>Такой разделитель намного легче править. Плюс его можно отдельно раскрашивать через CSS:
.sawEdge path {
fill: purple;
}Демо на CodePen. Есть подводные камни (на устройствах с высокой плотностью пикселей).
30 секунд CSS