Недокументированные приемы CSS

[YuryKa]

CSS мощная штука. И статья интересная.

[Kwisatz]

Если бы еще все это еще не превращалось в ад когда нужно добицо кроссброузерности, цены бы ему не было.

Ну и действительно важные вещи не развиваются десятилетиями. 2018 год а для печати из броузеров до сих пор применяются костыли. Просто пример: попробуйте в хроме поставить разрыв страницы между строками таблицы 8)

[trawl]

Спасибо! Полезная подборка!

[extempl]

Шерить код картинками да ещё и разными размерами — так себе решение. Особенно для туториала, где возможность скопировать код — маст хев.
А так — довольно полезно для тех, кто не следит за Lea Verou.
Хотя не знал про относительное позиционирование (right 10px) и про применения background-clip для решения прозрачных рамок, хотя решение конечно лежит на поверхности.

[SelenIT3]

У background-clip вообще немало полезных применений. Причем вполне документированных!:)

[kartvladek]

кстати да — для себя именно это и отметил. всё остальное известно именно от Lea Verou

[anttoshka]

Одна проблема большинства этих решений — они не работают в IE11. А большинство заказчиков его хочет поддерживать.

[Rarus77]

Те, кто пользуется IE 11 должны страдать))

[spmbt]

Где найти такое же, но с текстовыми примерами кодов? Ещё лучше — с кодами в JSFiddle / CodePen / CSS Deck / JS Bin / Dabblet / Plunker ?

[dgrigorov]

Добавил ссылку на GitHub в конец статьи

[Amareis]

Маленький трюк. Небольшую треугольную стрелочку можно нарисовать с помощью div'а нулевых размеров, у которого установлен border: %n%px solid transparent; (где %n% — размер стрелки) и затем красим только одну границу в нужный цвет: border-left-color: green; получится зелёная стрелка, которая показывает вправо (!). Хорошо работает в комбинации с :after и :before псеводэлементами.
https://jsfiddle.net/zvwpv3eb/2 тут можно потыкать и понять почему и как это.

[tehnolog]

Параллелограмм – это, прежде всего, нестандартный прямоугольник, у которого углы должны быть не всегда прямые.

Это мощное утверждение, опровергать я его, конечно, не буду. ))

[bb0ff]

Там ещё из пересечения двух квадратов шестиугольник получается, тоже миленько ;)
Но главное тут — ссылка на книжку, за это спасибо.

[daemonhk]

Анимация зелено-коричневого круга глючит в Хроме — в самый последний момент анимации моргает, возвращается градусов эдак на 10 назад и повторяет анимацию.

А так узнал много нового, спасибо большое) Вот только встает вопрос о поддержке браузерами некоторых «грязных» трюков, вроде currentColor, да и вообще, насколько это «правильно» с позиции стандартов CSS и разработки?

[extempl]

"грязный" трюк вроде currentColor поддерживается всеми браузерами практически с момента их выпуска в мир и является очень базовым механизмом никак не относящимся ни к трюкам, ни, тем более, к грязным из них.
Ну ладно, IE8 и ниже его не поддерживают, но это укладывается в "практически всеми".

Ref: https://caniuse.com/#search=currentColor

[rrrrex]

Есть еще сайт, на котором выкладывают анимации с ограниченным размером кода. Конечно функций там не так много используется, но разнообразие полученного результата поражает.
www.dwitter.net

[mdss]

все примеры из книги есть на сайте play.csssecrets.io
А в статье надергали несколько глав из самой книги.

[justboris]

Недокументированные приемы CSS

Очень даже документированные. Все происходит как и описано в спецификации.

Малоизвестные — да, но никак не «недокументированные»

[domix32]

Не понимаю почему статья зовет все это «недокументированными» трюками css?

[batmandarkside]

Хорошо зашло! Спасибо
В комментах пуканы горят, как будто личное оскорбление в названии статьи

[vconst]

Вы сайтом не ошиблись?

[batmandarkside]

…

[Rad1calDreamer]

Книга действительно стоящая

[romandev411]

ага, с первого абзаца узнал эту книгу.

[ExploZeR]

По clip-path незаменимый инструмент — Clippy
Там всё блоку можно какую хочешь форму придать, удобно сделано

[Matuvi]

Я бы полупрозрачные рамки как в примере сделал через box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.5); =)

[rockon404]

Про currentColor стоит добавить, то один из лучших кейсов использования этой переменной — стилизация SVG:

.svg-icon-class {
  fill: currentColor;
}

и псевдо-элементов, которые должны быть одного цвета текстом.