El Noguer

Origen: 3 New CSS Features to Learn in 2017

Aquest 2017 es pot dir que el CSS per fi ho té tot!

1. Feature Queries

Fins ara es mirava si el navegador era Firefox, IE o Chrome, mòbil i es feia un CSS especialitzat per a cada tipus de navegador. Amb Feature Queries només caldrà un sol CSS, en el qual podrem preguntar al navegador si sap o no sap fer una cosa.

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

2. Grid Layout + flexible lengths + gutters

Per definir les parts de la pantalla vam utilitzar TABLE, DIV amb float:left i moltes coses més. Però ara per fi tenim una forma decent i fàcil de definir-ho.

.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

3. Native Variables

Què és un llenguatge sense variables ? Doncs això CSS després de tants anys per fi permet definir variables.

:root {
  --theme-colour: cornflowerblue;
}

h1 { color: var(--theme-colour); }  
a { color: var(--theme-colour); }  
strong { color: var(--theme-colour); }  

….

const rootEl = document.documentElement;  
rootEl.style.setProperty('--theme-colour', 'plum');  

Tweet