Buenas prácticas

• Pasos previos
• Reset de CSS
• Defensive CSS

Buenas prácticas: Pasos previos

• Soporte a navegadores
• Analizar diseños / dudas
• Dibujar en papel layout
• Identificar componentes
• HTML con reset de estilos
• Estilos para tipografías y cajas
• Reglas CSS

Buenas prácticas: Resets CSS

Orden de la cascada

1. Browser styles
2. User Styles
3. Author Styles
   1. @layer theme [...]
   2. Non-Layered Styles

Buenas prácticas: Resets CSS

Librería Reset CSS

Buenas prácticas: Resets CSS

Librería normalize CSS

Buenas prácticas: Resets CSS

See the Pen CAP - Html limpio by Iván Albizu (@ivan_albizu) on CodePen.

Buenas prácticas: Defensive CSS

• Tratar de evitar "roturas" de CSS por diferentes casos de uso Ahmad Shadeed

Preprocesador SASS

• Transpilación
• Indentación (nesting)
• Variables
• Operador "&"
• Mixins
• Maps
• Funciones

Preprocesador SASS: Transpilación

• Los navegadores reconocen CSS
• Requiere herramienta intermedia que transforme SCSS a CSS
• Más mantenible. Se dota de características propias de programación: variables, funciones, mapas...

Preprocesador SASS: Indentación

            
              .nav .list {
                margin: 0;
                padding: 0;
              }
              .nav .list .list-item {
                display: inline-block;
              }
            
          

Preprocesador SASS: Indentación

            
              .nav .list {
                margin: 0;
                padding: 0;
              }
              .nav .list .list-item {
                display: inline-block;
              }
            
          

Preprocesador SASS: Indentación

            
              .nav {
                .list {
                  margin: 0;
                  padding: 0;
                }
              }
              .nav .list .list-item {
                display: inline-block;
              }
            
          

Preprocesador SASS: Indentación

            
              .nav {
                .list {
                  margin: 0;
                  padding: 0;
                }
              }
              .nav .list .list-item {
                display: inline-block;
              }
            
          

Preprocesador SASS: Indentación

            
              .nav {
                .list {
                  margin: 0;
                  padding: 0;
                }
                .list .list-item {
                  display: inline-block;
                }
              }
            
          

Preprocesador SASS: Indentación

            
              .nav {
                .list {
                  margin: 0;
                  padding: 0;
                  .list-item {
                    display: inline-block;
                  }
                }
              }
            
          

Preprocesador SASS: Variables

            
              $color-primary: #cc0; //definición de variable SASS
              .nav {
                color: $color-primary; //uso de variable SASS
              }
              .logo {
                outline: 1px solid $color-primary; //uso de variable SASS
              }
            
          

Preprocesador SASS: Variables

            
              $color-primary: #cc0; //definición de variable SASS
              .nav {
                color: $color-primary; //uso de variable SASS
              }
              .logo {
                outline: 1px solid $color-primary; //uso de variable SASS
              }
            
          

Preprocesador SASS: Variables

            
              $color-primary: #cc0; //definición de variable SASS
              .nav {
                color: #cc0; //lo que le llega al navegador
              }
              .logo {
                outline: 1px solid #cc0; //lo que le llega al navegador
              }
            
          

Preprocesador SASS: Variables

See the Pen CAP - Sass variables by Iván Albizu (@ivan_albizu) on CodePen.

Preprocesador SASS: Operador "&"

            
              .header {
                // some code
                &__nav {
                  // perhaps, more code
                }
              }
            
          

Preprocesador SASS: Operador "&"

            
              .header {
                // some code
              }
              .header__nav {
                // perhaps, more code
              }
            
          

Preprocesador SASS: Operador "&"

            
              .link {
                // some code
                &.is-active {
                  // perhaps, more code
                }
              }
            
          

Preprocesador SASS: Operador "&"

            
              .link {
                // some code
              }
              .link.is-active {
                // perhaps, more code
              }
            
          

Preprocesador SASS: Mixins

            
              @mixin theme($theme: DarkGray) {
                background: $theme;
                box-shadow: 0 0 1px rgba($theme, .25);
                color: #fff;
              }
            
          

Preprocesador SASS: Mixins

            
              @mixin theme($theme: DarkGray) {
                background: $theme;
                box-shadow: 0 0 1px rgba($theme, .25);
                color: #fff;
              }
              .info {
                @include theme;
              }
              .alert {
                @include theme($theme: DarkRed);
              }
            
          

Preprocesador SASS: Mixins

            
              @mixin theme($theme: DarkGray) {
                background: $theme;
                box-shadow: 0 0 1px rgba($theme, .25);
                color: #fff;
              }
              .info {
                background: DarkGray;
                box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
                color: #fff;
              }
              .alert {
                background: DarkRed;
                box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
                color: #fff;
              }
            
          

Preprocesador SASS: Maps

            
              $theme-colors: (
                "primary": $primary,
                "danger": $danger
              );
              body {
                background-color: map-get($theme-colors, "primary");
              }
              // el uso de map-get suele ser mediante función auxiliar para
              // evitar posibles errores al no encontrar la 'key' o 'values' inesperados
              // ejemplo: https://gist.github.com/lewismcarey/de2a70fe93ab235ba103
            
          

Preprocesador SASS: Funciones / Loops

Ejemplo de uso, no entramos en detalles

See the Pen fluid css by Iván Albizu (@ivan_albizu) on CodePen.

Metodología BEM

• Basado en el nombrado de clases
• Evitar colisionado de estilos
• Aporta semántica

Metodología BEM: sintáxis

• B → Bloque
• E → Elemento → __elemento
• M → Modificador → --modificador

Metodología BEM: ejemplo header

See the Pen CAP - BEM menu by Iván Albizu (@ivan_albizu) on CodePen.

Custom Property

• Definición
• Ámbito
• Registro
• Ejemplos

Custom Property: definición

            
              --main-color: #32022c; // definición de Property y asignación de valor
              color: var(--main-color);
              border-color: var(--main-color, purple);
            
          

Custom Property: definición

            
              --main-color: #32022c; // definición de Property y asignación de valor
              color: var(--main-color); // uso de Property
              border-color: var(--main-color, purple);
            
          

Custom Property: definición

            
              --main-color: #32022c; // definición de Property y asignación de valor
              color: var(--main-color); // uso de Property
              border-color: var(--main-color, purple); // uso de Property con fallback
            
          

Custom Property: ámbito

            
              // en cualquier regla CSS tendrá este valor
              // salvo que se sobreescriba en otra regla
              :root {
                --main-color: #32022c;
              }

              // nuevo valor para la Property
              // para cualquier elemento que esté dentro de ".nav"
              // salvo que se sobreescriba en otra regla hija
              .nav {
                --main-color: #022;
              }
            
          

Custom Property: ámbito

            
              // en cualquier regla CSS tendrá este valor
              // salvo que se sobreescriba en otra regla
              :root {
                --main-color: #32022c;
              }

              // nuevo valor para la Property
              // para cualquier elemento que esté dentro de ".nav"
              // salvo que se sobreescriba en otra regla hija
              .nav {
                --main-color: #022;
              }
            
          

Custom Property: ámbito

            
              // en cualquier regla CSS tendrá este valor
              // salvo que se sobreescriba en otra regla
              :root {
                --main-color: #32022c;
              }

              // nuevo valor para la Property
              // para cualquier elemento que esté dentro de ".nav"
              // salvo que se sobreescriba en otra regla hija
              .nav {
                --main-color: #022;
                .item {
                  --main-color: #bbb022;
                }
              }
            
          

Custom Property: registro

            
              @property --coordinate-x {
                initial-value: 50%;
                inherits: true;
                syntax: '<percentage>';
              }
            
          

Custom Property: registro

See the Pen Transition for custom Property (css Vars) by Iván Albizu (@ivan_albizu) on CodePen.

Custom Property: ejemplo mejora accesibilidad

            
              :root {
                --t-delay-btn: .3s;
                --t-duration-btn: .5s;
              }
            
          

Custom Property: ejemplo mejora accesibilidad

            
              :root {
                --t-delay-btn: .3s;
                --t-duration-btn: .5s;
              }
              .btn {
                transition: all var(--t-duration-btn) linear var(--t-delay-btn);
                &:hover,
                &:focus {
                  transition: all var(--t-duration-btn) linear var(--t-delay-btn);
                }
              }
            
          

Custom Property: ejemplo mejora accesibilidad

            
              :root {
                --t-delay-btn: .3s;
                --t-duration-btn: .5s;
              }
              @media screen and (prefers-reduced-motion: reduce) {
                :root {
                  --t-delay-btn: 0.01ms;
                  --t-duration-btn: 0.01ms;
                }
              }
              .btn {
                transition: all var(--t-duration-btn) linear var(--t-delay-btn);
                &:hover,
                &:focus {
                  transition: all var(--t-duration-btn) linear var(--t-delay-btn);
                }
              }
            
          

Custom Property: ejemplo mejora accesibilidad

See the Pen Prefers Reduced Motion by Iván Albizu (@ivan_albizu) on CodePen.

Custom Property: ejemplo Web component

            
              :host button:hover,
              :host button:focus-within {
                outline: 2px solid var(--color-tab-active-background, #5A3A31);
              }
              :host .js-active-tab-bg {
                background-color: var(--color-tab-active-background, #5A3A31);
              }
            
          

Custom Property: ejemplo Web component

See the Pen WebComponent Tabs with Slots by Iván Albizu (@ivan_albizu) on CodePen.

@container CSS

• ¿Qué es @container?
• Estado actual
• Definición de @container
• Unidades propias de @container
• @container style()
• Nested @container

¿Qué es @container?

spoiler

Estado actual @container size - Caniuse

Estado actual @container units - Caniuse

Estado actual @container style

Estado actual - @supports

            
              @supports not (container: inline-size) {
                .warning {
                  display: block;
                }
              }
              @supports (selector(:has(*))) {
                body {
                  background-color: red
                }
              }
            
          

Definición de @container | HTML

Definición de @container | CSS

              
                [data-container="btn"] {
                  container-type: inline-size;// size | inline-size | normal
                  container-name: btns;
                  //container: <container-name> / <container-type>;
                }
                .btn-groups {
                  display: flex;
                  flex-direction: column;
                }
                @container btns (min-width: 300px) {
                  .btn-groups {
                    flex-direction: row;
                  }
                }
                @container (width > 900px) {
                  .card {
                    --bg-color: brown;
                    --padding: 16px;
                  }
                }
              
            

Unidades propias de @container

Unidades propias de @container

              
                .title-card {
                  font-size: clamp(1rem, 3cqi + 1rem, 4rem);
                  line-height: 1.1;
                  margin-bottom: 1rem;
                }
              
            

@container style()

            
              @container style(--type: primary) {
                .card {
                  border: 0.5rem dotted currentColor;
                }
                @container style(--sub-type: narrow) {
                  .card {
                    border-width: 0.2rem;
                  }
                }
                @container style(--sub-type: wide) {
                  .card {
                    border-width: 1rem;
                  }
                }
              }
              @container style(--type: primary) or style(--type: secondary) {
                // some styles
              }
            
          

@container size + style()

            
              @container card (min-width: 600px) and style(--responsive: true) {
                .card {
                  outline: 2px solid currentColor;
                  outline-offset: -8px;
                }
              }
            
          

Ejemplo I: @container querie

See the Pen CSS @container by Iván Albizu (@ivan_albizu) on CodePen.

Ejemplo II: @container querie + unit

See the Pen Container Queries + Container Units by Iván Albizu (@ivan_albizu) on CodePen.

Ejemplo III: @container style()

See the Pen Untitled by Iván Albizu (@ivan_albizu) on CodePen.

Ejemplo IV: @container style()

See the Pen CSS @containers | nested + layers by Iván Albizu (@ivan_albizu) on CodePen.

Recursos de interés

End

Un gran poder conlleva una gran responsabilidad

CSS houdini

• Grupo de APIs que da acceso directo a CSSOM
• Mediante worklets
• Permite escribir código que el navegador puede analizar como CSS
• Crear nuevas funcionalidades CSS sin esperar a que se implementen de forma nativa en los navegadores

Ampliar información de manera más técnica y con más ejemplos

CSSOM

• document.styleSheets
• CSSStyleSheetList
• CSSStyleSheet
• CSSRuleList
• CSSStyleRule
• CSSStyleDeclaration

Más info: MDN

APIs definidas aunque no todas disponibles

• CSS Properties and Values API
• CSS Typed OM
• CSS Painting API
• Worklets
• CSS Layout API
• CSS Parser API

CSS Painting API

CSS Painting API: registro

            
              class BtnPulse {
                paint(ctx, size, props) {
                  // Code
                }
              }

              registerPaint('btn-pulse', BtnPulse);
            
          

CSS Painting API: registro (codepen)

            
              // Opción para usarlo en Codepen
              (async () => {
                if (typeof CSS === 'undefined' || !('paintWorklet' in CSS)) {
                  await import("https://unpkg.com/css-paint-polyfill");
                }

                const paintModule = URL.createObjectURL(new Blob(
                  [ document.querySelector('[type="houdini/paint-worklet"]').textContent ],
                  { type: "text/javascript" }
                ));
                await CSS.paintWorklet.addModule(paintModule);
              })()
            
          

CSS Painting API: uso

            
              @supports (background: paint(something)) {
                .element {
                  background: tomato paint(btn-pulse);
                  border-image: paint(another-houdini-definition);
                }
              }
            
          

CSS Painting API: Canvas I

            
              registerPaint('btn-pulse', class {
                static get contextOptions() { }

                static get inputArguments() { }

                static get inputProperties() { }

                _paintCircles(ctx, fillStyle, strokeStyle, x, y, rad)  { }

                paint(ctx, size, props) { }
              })
            
          

CSS Painting API: Canvas II

            
              registerPaint('btn-pulse', class {
                static get contextOptions() { }

                static get inputArguments() { }

                static get inputProperties() {
                  return []
                }

                _paintCircles(ctx, fillStyle, strokeStyle, x, y, rad)  { }

                paint(ctx, size, props) { }
              })
            
          

CSS Painting API: Canvas III

            
              registerPaint('btn-pulse', class {
                static get contextOptions() { }

                static get inputArguments() { }

                static get inputProperties() {
                  return [
                    '--x',
                    '--y',
                    '--rad',
                    '--pulse-rad',
                    '--fill',
                    '--pulse-stroke-color'
                  ]
                }

                _paintCircles(ctx, fillStyle, strokeStyle, x, y, rad) { }

                paint(ctx, size, props) { }
              })
            
          

CSS Painting API: Canvas IV

            
              registerPaint('btn-pulse', class {
                static get contextOptions() { }

                static get inputArguments() { }

                static get inputProperties() {
                  return [
                    '--x',
                    '--y',
                    '--rad',
                    '--pulse-rad',
                    '--fill',
                    '--pulse-stroke-color'
                  ]
                }

                _paintCircles(ctx, fillStyle, strokeStyle, x, y, rad) {}

                paint(ctx, size, props) { }
              })
            
          

CSS Painting API - Canvas V

            
              registerPaint('btn-pulse', class {
                static get contextOptions() { }

                static get inputArguments() { }

                static get inputProperties() {
                  return [
                    '--x',
                    '--y',
                    '--rad',
                    '--pulse-rad',
                    '--fill',
                    '--pulse-stroke-color'
                  ]
                }

                _paintCircles(ctx, fillStyle, strokeStyle, x, y, rad) {
                  ctx.beginPath()
                  ctx.fillStyle = fillStyle
                  ctx.strokeStyle = strokeStyle
                  ctx.arc(x, y, rad, 0, 2 * Math.PI)
                  ctx.fill()
                  ctx.stroke()
                }

                paint(ctx, size, props) { }
              })
            
          

CSS Painting API: Canvas VI

            
              registerPaint('btn-pulse', class {
                static get contextOptions() { }

                static get inputArguments() { }

                static get inputProperties() {
                  return [
                    '--x',
                    '--y',
                    '--rad',
                    '--pulse-rad',
                    '--fill',
                    '--pulse-stroke-color'
                  ]
                }

                _paintCircles(ctx, fillStyle, strokeStyle, x, y, rad) {
                  ctx.beginPath()
                  ctx.fillStyle = fillStyle
                  ctx.strokeStyle = strokeStyle
                  ctx.arc(x, y, rad, 0, 2 * Math.PI)
                  ctx.fill()
                  ctx.stroke()
                }

                paint(ctx, size, props) { }
              })
            
          

CSS Painting API: Canvas VII

            
              registerPaint('btn-pulse', class {
                static get contextOptions() { }

                static get inputArguments() { }

                static get inputProperties() {
                  return [
                    '--x',
                    '--y',
                    '--rad',
                    '--pulse-rad',
                    '--fill',
                    '--pulse-stroke-color'
                  ]
                }

                _paintCircles(ctx, fillStyle, strokeStyle, x, y, rad) {
                  ctx.beginPath()
                  ctx.fillStyle = fillStyle
                  ctx.strokeStyle = strokeStyle
                  ctx.arc(x, y, rad, 0, 2 * Math.PI)
                  ctx.fill()
                  ctx.stroke()
                }

                paint(ctx, size, props) {
                  const x = props.get('--x')
                  const y = props.get('--y')
                  const rad = props.get('--rad')
                  const fill = (props.get('--fill')).toString()
                  const pulseRad = props.get('--pulse-rad')
                  const pulseStrokeColor = (props.get('--pulse-stroke-color')).toString()

                  this._paintCircles(ctx, fill, '#fff', x.value, y.value, rad.value)
                  this._paintCircles(ctx, 'transparent', pulseStrokeColor, x.value, y.value, pulseRad.value + rad.value)
                }
              })
            
          

See the Pen CSS Houdini Paint API - bezierCurve by Iván Albizu (@ivan_albizu) on CodePen.

@layer

• Definición
• Estado actual
• ¿Para que sirven?
• Importación / nested / non-layered

@layer definición

            
              @charset "UTF-8"
              @layer theme {rules};
              @layer theme;
              @layer theme, layout, utilities;
              @layer {rules}
            
          

Estado actual @layer: Caniuse

Capas @layer

• Más control sobre como se aplica la cascada
• Evitar selectores complejos
• Evitar técnicas !important

@layer: Orden de la cascada

1. Browser styles
2. User Styles
3. Author Styles
   1. @layer theme
   2. @layer layout
   3. @layer utilities
   4. Non-Layered Styles

@layer importación

            
              @charset "UTF-8";
              @layer reset;
              @import url("bootstrap.css");
              @import url("bootstrap.css") layer(framework);
            
          

@layer nested

            
              @layer outer {
                @layer inner {
                  .button {
                    color: red;
                  }
                }
              }

              @layer outer.inner {
                .another {
                  color: green;
                }
              }
            
          

@layer non-layered

            
              @layer base {
                #button.super-specific {
                  color: red;
                }
              }
              button {
                color: green;
              }
            
          

Ejemplos

Recursos interesantes

Funciones CSS + pseudo clases

• calc(), min(), max()
• clamp()
• Pseudo clases funcionales :is() :where() :has() :not()

Funciones CSS + pseudo clases

Contrast Theme

• Display Modes
• Windows Contrast Theme
• System Colors. Nombre de colores
• Propiedades afectadas
• Propiedades con comportamiento especial
• Detectar preferencias de contraste
• Y ahora... ¿qué?

Display Modes

• Dark Mode
• Reduced Motion Mode
• Invert Colors
• Increase Contrast
• Text Contrast
• Reduce Transparency
• Reader Mode
• Windows Contrast Themes

Contrast Theme I

Windows 10: High Contrast

Windows 11: Contrast Themes

MacOS: Accessibility > Displays > Increase contrast in MacOS

Contrast Theme II

Nombres de colores I

              
                Canvas / CanvasText (*): Background color / Regular text color
                Link (*): Link color
                ButtonFace / ButtonText (*): Button background color / Button text color
                Field / FieldText
                SelectedItem / SelectedItemText
                AccentColor / AccentColorText
                ActiveText / VisitedText
                Highlight / HighlightText (*): Selected text background color / Selected text color
                GrayText (*) (text color disabled)
                Mark / MarkText
              
              (*) Nombre de colores seguros y comunes
            

Nombres de colores II

See the Pen CSS4 System colors: forced-colors: active by Iván Albizu (@ivan_albizu) on CodePen.

Propiedades afectadas

              
                color
                background-color
                text-decoration-color
                text-emphasis-color
                border-color
                outline-color
                column-rule-color
                -webkit-tap-highlight-color
                SVG fill attribute
                SVG stroke attribute
              
            

Propiedades con comportamiento especial

              
                box-shadow: forzado a 'none'
                text-shadow: forzado a 'none'
                background-image: forzado a 'none' excepto url-based
                color-scheme: forzado a 'light dark'
                scrollbar-color: forzado a 'auto'
              
            

Detectar preferencias de contraste - CSS @media

              
                @media (forced-colors: active) {
                  .selector {
                    // +-equivale a "none" (currentColor, inherit)
                    // +info: https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust#preserve-parent-color
                    forced-color-adjust: preserve-parent-color;
                    //forced-color-adjust: none; //Con firefox puede dar problemas
                    &__hijo {
                      forced-color-adjust: auto;
                    }
                  }
                }
              
            

Detectar preferencias de contraste - Javascript

              
                const forced_colors = matchMedia('(forced-colors: active)');
                if ( forced_colors ) {
                  // User has constrast theme active
                }
              
            

Y ahora... ejemplo

See the Pen Untitled by Iván Albizu (@ivan_albizu) on CodePen.

Y ahora... la chapa (I)

1. Usa HTML semántico
2. Usa etiquetas correctas
   • Si quieres enlaces, usa <a>Enlace</a>
   • Si quieres acciones, usa <button>Botón</button>
   • [...]
3. Evita dar semántica a elementos "sin semántica" con ARIA/ROLE (gracias al punto 1.)
4. Tómate un tiempo, y una cerveza 0.0, antes de maquetar a lo loco. Los TOKENS CSS molan

Y ahora... la chapa (II)

5. Tips CSS:
   • Botones con bordes, y si el diseño no los tiene, valorar si es posible border-color: transparent;
   • Intenta dejar el "underline" de enlaces normales, pero si es obligado, valora usar text-decoration-color: transparent; en lugar de text-decoration: none;
   • No eliminar el focus-visible
   • Sugerir uso de media="(forced-colors: active)" en los <source> de <picture>

Y ahora... ¿merece la pena?

1. 51% de personas con baja visión usan Contrast Mode
2. WCAG
   • 1.4.8: Visual Presentation (AAA)
     1.- Foreground and background colors can be selected by the user.
   • 1.4.1 Use of Color (A)
     Color is not used as the only visual means of conveying information (example PEN)
3. Igualdad de oportunidades

Y ahora... recursos interesantes

• Sara Soueidan
• Scott O'Hara
• Adrian Roselli

Nombres accesibles (accName)

• Accessibility tree
• ¿Qué es nombre accesible?
• Importancia de accName
• Formas de establecer accName
• Orden en que se computa accName
• WCAG

Accessibility tree - diagrama

Accessibility tree - contenido

¿Qué es nombre accesible?

• Nombre o nombre accesible (accName) de un elemento es la cadena de texto que está programáticamente asociado
• Queda expuesto por el navegador de Tecnologías de Asistencia (AT) mediante el árbol de accesibilidad

Importancia de accName (I)

• Propósito del CTA
  • Si es botón: ¿qué hace el botón?
  • Si es enlace: ¿a dónde apunta el enlace?
• Especial importancia para personas que usan lectores de pantalla

Importancia de accName (II). Ejemplo

See the Pen Accessibility Content by Iván Albizu (@ivan_albizu) on CodePen.

Formas de establecer accName

See the Pen Accessibility CTA accName (II) by Iván Albizu (@ivan_albizu) on CodePen.

Orden en que se computa accName

1. Si existe aria-labelledby y apunta a id existente
2. aria-label
3. Si el elemento no tiene role="presentation" o role="none"
   1. Atributos title / alt
   2. Etiquetas <label> / <legend>
   3. Contenido

WCAG (I)

• 2.5.3 Label in Name (A)
  For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
• 3.3.2 Labels or Instructions (A)
  Labels or instructions are provided when content requires user input.
• 3.2.4 Consistent Identification (AA)
  Components that have the same functionality within a set of Web pages are identified consistently.

WCAG (II)

• 1.3.1 Info and Relationships (A)
  Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
• 4.1.2 Name, Role, Value (A)
  For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined [...]

EXTRA: accName Computations

EXTRA: popurri

• DRY: ejemplo tag chips o pagination
• Button icon: SVG title

Recursos interesantes

• Sara Soueidan
• Scott O'Hara
• Adrian Roselli

Astro

• File-based routing
• components / layout / pages
• script / layout / style

Astro - Islands

Astro - scaffolding I

Astro - scaffolding II

Astro - estructura de un fichero

            
              ---
              import Layout from "../layouts/Layout.astro";
              import ProductCard from "../components/ProductCard.astro";

              interface Props {
                title: string;
                description: string;
              }

              const { title, description } = Astro.props;
              ---

              
                

                  [...]
                
              

              

              
            
          

Astro Transitions - ¿Qué es?

View Transitions API

Interceptar la navegación

Animar elementos de Página Destino con Página Destino

Astro Transitions - old vs new

Astro Transitions - inicialización

            
src/pages/index.astro
            
              ---
              import { ViewTransitions } from 'astro:transitions';
              ---
              <html lang="en">
                <head>
                  
                  
                </head>
                <body>
                  
Welcome to my website!
                </body>
              </html>
            
          

Astro Transitions - directivas

Astro Transitions - Ejemplos

Sin Astro

Cons Astro

Astro Integraciones - VUE

Ejemplo en VSCode

Estado actual - Caniuse

Advanced attr() - CSS I

              
                content: attr(data-attr);
                --something: attr(data-attr);
                --something: attr(data-attr type(<color>));
                --something: attr(data-attr type(<color>), tomato);
                --something: attr(id type(<custom-ident>), tomato);
              
            

Advanced attr() - CSS II

Advanced attr() - PENs

Advanced attr() - Recursos interesantes