Push Publish

aspect-ratio
A CSS property that allows an element to have a specific width : height ratio.
Can use two positive values, separated with a forward slash e.g. 16 / 9.
Ensures that an element's box model always has the same proportions, regardless of screen size.
Ex. aspect-ratio: 16 / 9
Group of people at the sunset
Ex. aspect-ratio: auto
Group of people at the sunset
Can I Use: aspect-ratio
border-image
A property that allows you to use an image or a color gradient as the border of an element.
Similar functionality as regular CSS backround images/colors.
Only required property is the source of an image or a CSS color gradient.
Can I Use: border-image
columns
A property that serves as an alternative solution to column-based layouts.
Accepts two values:
A maximum number of columns (column-count)
A minimun width of each column (column-width)
Ex. 3 columns max, each with a minimum width of 250px

Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure et fugit error illo odit laudantium suscipit cupiditate eum, magni quisquam!

Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure et fugit error illo odit laudantium suscipit cupiditate eum, magni quisquam!

Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure et fugit error illo odit laudantium suscipit cupiditate eum, magni quisquam!

Card

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum voluptatum quis ratione in id totam unde facilis tempore repellat. Hic!

Card

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum voluptatum quis ratione in id totam unde facilis tempore repellat. Hic!

Card

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum voluptatum quis ratione in id totam unde facilis tempore repellat. Hic!

Can I Use: columns
scrollbar-color
A property that changes the thumb (foreground) and track (background) colors of a scrollbar.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, voluptas hic quis ducimus veniam facere possimus laudantium. At ea, veritatis, provident velit, voluptatum qui magni nisi error laborum accusamus quae ex omnis obcaecati unde sint explicabo alias autem aliquam ut similique quod consequatur. Iusto molestias vel nisi quisquam delectus, ut inventore nulla cupiditate optio obcaecati, tempora eaque. Amet quo veniam, labore voluptates atque hic earum eveniet aperiam vitae eaque sequi quisquam provident reprehenderit, dignissimos ut ex explicabo nihil possimus cupiditate magni asperiores qui quibusdam, quia adipisci? Dolore nostrum dicta ratione sit error suscipit voluptatem minus unde odio debitis! Quaerat, molestiae officia? Illo porro sed obcaecati unde voluptatum assumenda, aperiam voluptatibus aspernatur accusamus ratione modi incidunt repellat numquam harum illum ea autem provident quo praesentium veniam nam pariatur iste est perferendis. Minima a nobis nostrum facilis laudantium qui maiores officiis at possimus. Corporis debitis nam optio blanditiis laborum velit animi voluptate nihil quis fugiat cum minima consectetur, adipisci, quo quasi corrupti, deleniti delectus voluptatem incidunt sequi magnam. Dolore magnam, sunt, facere facilis sequi error explicabo, vero quia rerum magni tempora officiis. Ullam autem accusantium dolorem doloribus. A est soluta autem vero amet vitae eaque? Quod magnam fuga amet reiciendis vel aliquid, id porro modi ab soluta eligendi optio earum alias voluptatum quis saepe labore! Perspiciatis dolore delectus aliquid dolor, facilis nihil accusantium molestiae odit nisi? Voluptatem a aperiam iste aliquam eligendi, autem porro suscipit reprehenderit neque quod odio iusto libero dolorum nihil quae quas eum cupiditate! Commodi doloremque ipsam amet earum.
Can I Use: scrollbar-color
:required
A CSS selector that selects elements with the required attribute.
Can be used to easily show users the difference between required and optional form fields.
Can I Use: :required
:has()
A pseudo-class which only selects elements containing a child element that was passed into the selector's :has() function.
Example: Only cards that contain an image received the applied styles.
.card:has(img) {

/* only selects cards that have an image */

}

Card with image

Group of people at the sunset

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem perspiciatis provident, autem nisi esse unde, cumque ipsum aut, a accusamus in saepe quia odio nam neque consequatur tempore labore blanditiis nemo id. Veniam dignissimos quisquam nulla iste deserunt vero assumenda mollitia impedit provident architecto! Quam eveniet ipsa ducimus hic voluptates.

Card with no image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem perspiciatis provident, autem nisi esse unde, cumque ipsum aut, a accusamus in saepe quia odio nam neque consequatur tempore labore blanditiis nemo id. Veniam dignissimos quisquam nulla iste deserunt vero assumenda mollitia impedit provident architecto! Quam eveniet ipsa ducimus hic voluptates.

Can I Use: :has()