tgoop.com/frontend_1/4061
Last Update:
10 современных возможностей CSS, которые стоит использовать
Точно так же, как и JavaScript, CSS не пользуется наилучшей репутацией среди (Rails)-разработчиков. И, как и в случае с JavaScript (вспомните Turbo, а также CoffeeScript), у CSS длинная история препроцессоров, постпроцессоров и различных абстракций (например, Tailwind CSS).
И долгое время многие из этих надстроек были действительно необходимы. Трудно представить CSS без вложенных селекторов, не так ли?
Но на дворе 2025 год, и CSS развивается (и будет развиваться!) очень быстрыми темпами. Позади остались времена spacer.gif или создания изображений для каждого угла карточки, чтобы имитировать скруглённые границы.
Если вы какое-то время пренебрегали CSS (например, потому что пользовались Tailwind CSS), ниже я хочу выделить несколько новых возможностей CSS, которые я с удовольствием применяю в некоторых проектах (созданных под эгидой Rails Designer и не только). Хотя я всё ещё люблю использовать Tailwind CSS, понимание и реальное использование самого CSS - крайне важно. Веб строится на (открытых) стандартах, что необходимо для его доступности, поддерживаемости и долгосрочной актуальности.
Min, max and clamp
min()
Соединяя их вместе, так как они перекрываются
/* Keeps buttons from getting too wide on large screens */
.pricing-button {
width: min(300px, 90%);
}
Думайте о
min() как об установке верхнего предела. Оно выберет меньшее из значений. Удобно для того, чтобы элементы не становились слишком большими, при этом оставаясь адаптивными. То есть, пока 90% вычисляется как меньше 300px - используется 90%. Как только результат превышает 300px - используется это значение.max()
/* Ensures text stays readable even on tiny screens */
.terms-container {
font-size: max(16px, 1.2vw);
}
https://railsdesigner.com/modern-css-overview/
👉 @frontend_1
BY Frontend разработчик
Share with your friend now:
tgoop.com/frontend_1/4061