Non sapevo che CSS potesse fare questo

Riepilogo:

• Capacità del CSS Oltre lo Stile Base:

  • Scoperto che CSS offre funzionalità avanzate come :has e text-wrap, tra le altre, che possono migliorare notevolmente le capacità di progettazione web.

• Ordine per Provare Nuove Funzionalità:

  1. HTML: Inizia con HTML per strutturare i contenuti.
  2. CSS: Usa CSS per lo stile e funzionalità avanzate come il selettore :has.
  3. JS: Integra JavaScript per comportamenti dinamici e interattività.

• Selettori Avanzati di CSS:

  • Selettore :has:

    • Permette di selezionare un elemento in base al suo stato o alla presenza di specifici figli. Esempi:

      elemento:has(.figlio) {
      }
      elemento:has(> .figlio-diretto) {
      }
      elemento:has(:stato) {
      }
      elemento:has(:stato) .figlio {
      }
      

    • Supporta la logica booleana:

      elemento:has(:not(:stato)) {
      }
      elemento:has(.logico, .oppure) {
      }
      elemento:has(.logico):has(.e) {
      }
      

    • ❗ Rilevamento Funzionalità:

      @supports selector(figura:has(didascalia)) {
        figura:has(didascalia) {
          // definisci proprietà
        }
      }
      

    • ⚠️ Attenzioni:
      • Non è tollerante; usa :where per una selezione più permissiva.
      • Prende la specificità più alta tra i selettori argomentati.
      • Mantieni i selettori il più specifici possibile per evitare problemi di prestazioni.

  • Selettore :range:

    • Utilizza :nth-child(n + B) e :nth(-n + B) per contare elementi basandosi su condizioni specifiche. Esempio:

      :nth-child(An + B of .selettore) {
      }
      

    • Può anche utilizzare divisioni per contare con An e :last-child.

• Miglioramenti nel Wrapping del Testo:

  • Wrapping del Testo Tipograficamente Accurato:

    • text-wrap: balance;: Allinea le estremità delle righe per mantenere una forma rettangolare.
    • text-wrap: pretty;: Evita orfani di una sola parola nell’ultima riga dei paragrafi.

• Animazioni Basate sullo Scroll:

  • Esplora animazioni guidate dallo scroll usando risorse come scroll-driven-animations.style (da vedere preferibilmente in Chrome).
  • Come implementarle:
    1. Rimuovi la componente temporale dall’animazione.
    2. Rendi l’easing lineare.
    3. Aggiungi animation-timeline: scroll(block root);.

  • ❗ Rilevamento della Direzione di Scroll:

    • Consulta CodePen di Pecus per esempi.

Risorse:

• Progetto di Base:

  • Usa MDN CanIUse e web.dev per verificare il supporto alle funzionalità.

• Risorse Aggiuntive:

  • scroll-driven-animations.style
  • CodePen di Pecus

ℹ️ Questa pagina di appunti copre nuove funzionalità di CSS e fornisce indicazioni su come implementarle efficacemente, insieme a considerazioni importanti per prestazioni e compatibilità con i browser.