Lección 26: Avanzado

Pseudoelementos

Añade estilos a una parte concreta de un elemento. Se representa con doble dos puntos (::) a continuación del selector.

after

Después de un elemento. Muy utilizando junto a la propiedad content ya que permite disponer de un área colindante.

.firma::after {
  content: " Francisco de Quevedo";
  font-style: italic;
}

<p class="firma">
  El amor es fe y no ciencia.
</p>

before

Antes de un elemento. Muy utilizando junto a la propiedad content ya que permite disponer de un área colindante.

.tarea::before {
  content: "[X] ";
}

<p class="tarea">
  Aprender ruso.
</p>

first-letter

Primera letra del contenido.

.elemento::first-letter {
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: bold;
}

<p class="elemento">
 en un lugar de la Mancha...
</p>

first-line

Primera línea del contenido.

.texto::first-line {
  background: yellow;
}

<p class="texto">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

file-selector-button

Botón de un input de tipo file.

.input::file-selector-button {
  background: orange;
  color: white;
  border: 0;
}

<input name="avatar" type="file">

Pseudoclases

Estados especiales de un selector, como puede ser :hover o :focus. Se representa con dos puntos (:) a continuación del selector.

first-child

Primer elemento de un conjunto de hermanos.

li:first-child {
  color: orange;
}

<ul>
  <li>Pan</li>
  <li>Arroz</li>
  <li>Lentejas</li>
  <li>Garbanzos</li>
</ul>

Solo funciona aplicando a selectores hermanos, no sobre un padre (ul en este caso).

last-child

Último elemento de un conjunto de hermanos.

li:last-child {
  color: orange;
}

<ul>
  <li>Pan</li>
  <li>Arroz</li>
  <li>Lentejas</li>
  <li>Garbanzos</li>
</ul>

nth-child

Elemento determinado de un conjunto de hermanos. Empieza a contar por 1.

En caso que quiera dar un estilo al segundo.

li:nth-child(2) {
  color: orange;
}

<ul>
  <li>Pan</li>
  <li>Arroz</li>
  <li>Lentejas</li>
  <li>Garbanzos</li>
</ul>

Técnicas para centrar, o focalizar, la atención

Cuando se muestra un modal popup, hay que rediriguir donde mira el visitante y eliminar cualquier tipo de distración. Para ello podemos usar un par de técnicas.

• Oscurecer fondo.
• Por desenfoque.

@supports

Existen muchos estilos que, lamentablemente, no son compatibles con todos los navegadores. Ello nos limita a no poder utilizar características avanzadas. La declaración @supports nos da una solución parcial, ya que nos permite preguntar si cierto estilo es compatible antes de usarlo, y en caso contrario nos brinda la posibilidad de dar una alternativa.

Un caso típico. Quiero saber si puedo usar lch, una expresión de un color en LCH. De momento, solo es compatible con Safari. Usaré para mis a el color lch(30% 45 27), y en caso que no sea posible buscaré una aproximación en rgb.

a {
    /* Compatible con todos los navegadores */
    color: rgb(50.24% 14.25% 16.34%);
}

/* Compatible con Safari */
@supports (color: lch(30% 45 27)) {
    a {
        color: lch(30% 45 27);
    }
}

Otro caso típico más avanzado. Quiero usar backdrop-filter, que nos añade en el padre un desenfoque para centrar la atención. Solo es compatible en Chrome, mientras escribo estas líneas, y en Safari con el prefijo webkit.

.modal {
    /* Estilos del modal */
}

/* ¿Es compatible con Chrome? */
@supports (backdrop-filter: blur(8px)) {
    .modal {
        backdrop-filter: blur(8px);
    }
}

/* ¿Es compatible con Safari? */
@supports (-webkit-backdrop-filter: blur(8px)) {
    .modal {
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ¿No es compatible? Por ejemplo Firefox */
@supports (not (backdrop-filter: blur(8px))) and (not (-webkit-backdrop-filter: blur(8px))) {
    .modal {
        background-color: #fff5;
    }
}

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

• 1 café: Se mantiene el dominio durante 4 meses.
• 2 cafés: Se liquida 1 mes del Servidor Web.
• 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario