Fresh Hot CSS Features!

(AKA things you may have missed

in the last 5+ years)

Alex Riviere (He/Him)

Senior Vue Developer at Hygiena

https://alex.party

No notes on this slide.

Fresh Hot CSS Features! (AKA things you may have missed in the last 5+ years) Alex Riviere (He/Him) Senior Vue Developer at Hygiena https://alex.party

	body {
	color: #000000;
	background-color: #ffffff;
	}

	.invert {
	color: #ffffff;
	background-color: #000000;
	}

	// _vars.scss
	$color-ink: #000000;
	$color-paper: #ffffff;

	// _style.scss
	body{
	color: $color-ink;
	background-color: $color-paper;
	}

	.invert{
	color: $color-paper;
	background-color: $color-ink;
	}

	:root{
	--color-ink: #000000;
	--color-paper: #ffffff;
	}

	body{
	color: var(--color-ink);
	background-color: var(--color-paper);
	}

	.invert{
	color: var(--color-paper);
	background-color: var(--color-ink);
	}

	@property --my-color{
	syntax: "<color>";
	inherits: true;
	initial-value: black;
	}

	p{
	color: var(--my-color);
	}

	/* before.... */

	.wrapper .title{
	/* styles */
	}

	.wrapper .content{
	/* styles */
	}

	.wrapper .actions{
	/* styles */
	}

	/* after.... */
	.wrapper {

	.title{
	/* styles */
	}
	.content{
	/* styles */
	}
	.actions{
	/* styles */
	}
	}

	.blue-box{
	display:grid;
	grid-template-columns: 1fr;
	}

	@media screen and (min-width: 450px) and (max-width: 1023px){
	.blue-box{
	grid-template-columns: 1fr 1fr;
	}
	}

	@media screen and (min-width: 1024px) and (max-width: 1439px){
	.blue-box{
	grid-template-columns: 1fr;
	}
	}

	@media screen and (min-width: 1440px){
	.blue-box{
	grid-template-columns: 1fr 1fr;
	}
	}

	.blue-box-wrapper{
	container-type: inline-size;
	container-name: blue-box;
	}
	.blue-box{
	display:grid;
	grid-template-columns: 1fr;
	}

	@container blue-box (min-width: 450px) {
	.blue-box {
	grid-template-columns: 1fr 1fr;
	}
	}

	@layer style, utility;

	@layer style {
	.my-wrapper .my-class{
	color:blue;
	}
	}

	@layer utility{
	.text-red{
	color:red;
	}
	}

	@layer framework, style, utility;

	@import url('framework.css') layer(framework);

	@layer utility{
	.text-red{
	color:red;
	}
	}

	@layer style {
	.my-wrapper .my-class{
	color:blue;
	}
	}

	<style>
	p{ color:red; }
	</style>
	<p>This is red text!</p>

	<div>
	<style>
	@scope{
	p{ color: blue; }
	}
	</style>
	<p>
	This text is blue!
	</p>
	</div>

	/* in scss */

	$primary: #639;
	$primary-hover: lighten($primary, 25%);

	body{
	background-color: $primary;
	}

	body:hover{
	background-color: $primary-hover;
	}

	/* compiled CSS */

	body {
	background-color: #639;
	}

	body:hover {
	background-color: #a679d2;
	}

	:root{
	--c-primary: #639;
	--c-primary-hover: hsl(from var(--c-primary) h s calc(l + 25));
	}

	body{
	background-color: var(--c-primary);
	}

	body:hover{
	background-color: var(--c-primary-hover);
	}