Hot CSS Gossip

What If...?

Alex Riviere (He/Him)

Senior Vue Developer at Hygiena

alex.party

Slides:

https://slides.com/fimion/hot-css-gossip-what-if

Vibe Check

Is JavaScript a Programming Language?
Is CSS a Programming Language?
Is this list straight?

Logic Statements

if(true) {
  // Do Something....
} else {
  // Do something different
}

logicalStatement ? trueValue : falseValue;

switch(value){
  case 1:
    // Do something
    break;
  case 2:
    // Do something different
    break;
  default:
    // Do something else
    break;
}

const switchCases = {
  red: "#FF0000",
  green: "#00FF00",
  blue: "#0000FF",
};

const color = switchCase?.[value] ?? "#000000";

Logic Statements

.card {
  width: var(--size) === "big" ? 500px : 100px;
}

.card{
  width: 100px;
}
.card[data-big]{
  width: 500px;
}

@media

(AKA responsive design)

.card{
  width: 100px;
}
.card[data-big]{
  width: 500px;
}

@media screen and (max-width: 500px){
  .card{
    width: 100%;
  }
}

.card{
  width: 100px;
}
.card[data-big]{
  width: 500px;
}

@media screen and (max-width: 500px){
  .card{
    width: 100% !important;
  }
}

.card{
  width: 100px;
}
.card[data-big]{
  width: 500px;
}

@media screen and (max-width: 500px){
  .card, .card[data-big]{
    width: 100%;
  }
}

.card{
  width: 100px;
}
.card[data-big]{
  width: 500px;
}

@media screen and (max-width: 500px){
  .card.card.card{
    width: 100%;
  }
}

/* Else */
.card{
  width: 100%;
}

/* If */
@media screen and (min-width: 500px){
  .card{
    width: 100px;
  }
  .card[data-big]{
    width: 500px;
  }
}

@container

(AKA box-size media queries)

@container

.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;
  }
}

@container

.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;
  }
}

"But Alex! Those aren't actual if statements!"

@container style()

(AKA the "if" query)

/* Else */
.card{
  width: 100%;
}

/* If */
@media screen and (min-width: 500px){
  .card{
    width: 100px;
  }
  .card[data-big]{
    width: 500px;
  }
}

/* Else */
.card{
  width: 100%;
  
  &[data-big]{
    --size: big;
  }
}


/* If */
@media screen and (min-width: 500px){
  .card{
    width: 100px;
  }
  
  /* If */
  @container style(--size: big){
    .card{
      width: 500px;
    }
  }
  
}

"Alex. That is not better."

`if()`

(AKA "if". There isn't really an AKA here.)

/* Else */
.card{
  width: 100%;
  
  &[data-big]{
    --size: big;
  }
}


/* If */
@media screen and (min-width: 500px){
  .card{
    width: 100px;
  }
  
  /* If */
  @container style(--size: big){
    .card{
      width: 500px;
    }
  }
  
}

.card{
  width: if(
    media(min-width: 500px): if(
      style(--size:big): 500px;
      else: 100px;
    );
    else: 100%;
  );
  
  &[data-big]{
    --size:big;
  }
}

Slides:

Deets:

Alex Riviere

https://slides.com/fimion/hot-css-gossip-what-if