Comments 52
UFO landed and left these words here
Уберите приписки «подводных камней нет» — как минимум в некоторых пунктах они не соответствуют действительности, а потому бесполезны.

Это перевод. Но претензию можно (и нужно) адресовать оригиналу. В принципе, проект опенсорсный и общая идея хорошая, надеюсь, общими усилиями со временем допилим!


А пока что можно вносить уточнения тут в комментариях. Например, по подводным камням многострадального «клиарфикса» и его «друзей» осмелюсь нескромно предложить этот наглядный пример и сводную таблицу таких «камней»...

Не думаю что они так уж бесполезны. Верно я понял, что они указывают на (не)использование префиксов?

Не только. Они, похоже, имеют в виду, что это не что-то нестандартное. Но хак (в случае того же многострадального клиарфикса, например) от стандартности применяемых средств хаком быть не перестает, и может аукнуться, например, если контейнеру с на всякий случай стоявшим клиарфиксом, кто-нибудь захочет задать flex или grid...

А например, сниппет про
Выдвигающееся (popout) меню
просто вреден с точки зрения доступности контента: пользователи без мышки (например, владельцы смартфонов и планшетов) просто никак этот контент не увидят.
Раз на элемент нужно наводить — значит это кнопка или ссылка.
Можно использовать не только :hover, но и :focus для отображения подсказки.
до тех пор полезно пока градиентный квадрат не упрется в правую часть окна. И подсказка видна не будет. Все же title=«подсказка» лучше для этого подходит. Этот атрибут «видит» границы и не уходит в неведомую даль
В нём также не хватает задержки сворачивания. Без неё сниппет просто ужасен: стоит дрогнуть курсору, и весь путь приходится начинать сначала. Особенно если меню многоуровневое, а пункты — небольшой высоты.
Особенно если меню многоуровневое, а пункты — небольшой высоты.

За такое нужно бить безотносительно способа реализации.
Согласен, ужасно. Не говоря уже, что скрытый визуально элемент будет все-равно влиять на вёрстку, отодвигая границу страницы, в случае его нахождения у оной. display: none; во многих случаях предпочтительнее.
> «Helvetica Neue»… взят в кавычки, потому что в названии есть пробел.

В кавычки не нужно брать…

А за что минус влепили? Стандарт ведь кавычек действительно не требует...


Имена шрифтов кроме общих семейств (т.е. ‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, и ‘monospace’) должны быть либо в кавычках как строки, либо без кавычек как последовательность из одного и более идентификаторов.

… хотя, правда, и рекомендует ставить их «для ясности»:


Во избежание ошибок в экранировании, рекомендуется брать в кавычки имена шрифтов, содержащие пробелы, цифры и знаки пунктуации кроме дефиса
UFO landed and left these words here
Устаревшие весьма приемы, но для новичков может быть полезно. Хотя многое из CSS Secrets вроде взято. Ну и блиин..2018 год… вставлять демки картинками это моветон
Иронично, что на примере «очень резкой и не размытой рамки» видно размытый бордер
Градиент при избыточной прокрутке

В этом примере я бы ещё добавил


.overflow-scroll-gradient::after {
  …
  pointer-events: none
}

Что бы можно было кликнуть "сквозь" псевдоэлемент.

Зачем-то закодирован 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 тут ни на что не влияют, и их можно смело выкосить.

И l12-12 можно убрать из path так как z всё равно его замкнёт.


<path d='M12 12l12 12H0z' fill='white'/>
+ ко всему fill можно вывести в свойства класса и манипулировать им из цсс
Хром, ФФ, Опера, Эдж точно поддерживают, только что проверил, но у меня СВГ вставлен инлайново в разметку, а стилями уже задаю цвета, хаверы и т.д. с транзишенами. Да еще и заполнение линии можно сделать анимацией.
Я не помню сейчас навскидку, но точно где-то сталкивался с проблемами. Вообще SVG — очень мутная и труднопредсказуемая штука. Её можно использовать миллионом способов и обязательно какой-то из них где-то будет косячным — это я говорю по личному опыту, хотя и не имеющему прямого отношения к обсуждаемому примеру. Помню, раньше в IE и старых Хромах имели значения даже кавычки (одиночные/двойные, экранированные/нет).
SVG — очень мутная и труднопредсказуемая штука… раньше в IE и старых Хромах имели значения даже кавычки

Да что уж там, в IE11 (можно сказать, что это почти нормальный браузер) переносы строк не в том месте могут все сломать.
но у меня СВГ вставлен инлайново в разметку

Вставленный инлайново и в стили это две большие разности по возможностям.
Конечно.
А насчет кроссбраузерности — вот к примеру в этом сервисе 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; } запасён отдельный котёл в аду. Привет, Хабр.

Вот так, верстаешь 2-3 года, ломаешь голову, учишься разным фишками css (типа треугольников, обрезанию текста. и т.д.), а в 2018 году достаточно прочесть одну статью :D
Круто, спасибо за статью!

Народ, не перегоняйте SVG в base64, SVG — и так текстовый формат, скорее всего вы только хуже сделаете.

Постоянное соотношение ширины к высоте
«метод padding-bottom»
Его описание неправильное.
Проценты падинг будет получать не от самого себя а от родителя.

Как вариант можно использовать псевдоэлемент:
.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
  
  &:before {
    content: '';
    display: block;
    padding-top: 50%;
  }
}

В тексте все правильно написано, 50% padding будет браться от собственной ширины элемента: codepen.io/anon/pen/RQOgap

В вашем случае получится прямоугольник с соотношением 2:1
codepen.io/anon/pen/MQRoKL
Чтобы работало правильно — надо чтобы у `::beforе` padding-top был 100%
50% padding не будет браться от собственной ширины, а будет ей равен.
Ну я понял, здесь немного другая задача.
Разделитель

Использует 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. Есть подводные камни (на устройствах с высокой плотностью пикселей).

Only those users with full accounts are able to leave comments. Log in, please.