#фишка дня

Я недавно писал пост про реализацию панелей с изменяемым размером. Ну как в редакторах или на том же кодпене: https://t.me/htmlshit/2211

Так вот, забудьте. Если стоит задача просто сделать пару панелек и дать возможность изменять их размер, это можно сделать чистым CSS!

Да, многие уже догадались, что речь идёт о свойстве resize: https://codepen.io/alinaki/pen/MWZXzMY

Интересный момент — если элемент блочный, overflow обязательно должно быть hidden.

«Не, погоди, а где панели-то?»

Терпение! Глядите, что придумал небезызвестный Jhey: https://codepen.io/alinaki/pen/zYyaMQB

Суть в том, что создаётся грид:

  grid-template-columns: auto 1fr;

И в первую из панелей вставляется элемент resizer, с включённым нужным нам свойством.

А вот дальше натурально магия: браузеры не дают возможности стилизовать уголок-ручку, за которую надо дёргать, а она очень маленькая.

Джей вышел из ситуации интересным способом: заскейлил элемент в несколько раз и примерно на месте ручки поместил псевдоэлемент. А чтобы остальной блок не мешался — обрезал его через clip-path.

По-моему, это гениально. И работает фактически везде!

#css #trick #resize