Sintassi

Significato dei parametri:

• url("style.css"): Indica il percorso del foglio di stile da importare. Può essere relativo o assoluto.

• "style.css": Alternativa alla sintassi con url(), funziona anche con virgolette semplici o doppie.

• media query (opzionale): Permette di importare lo stile solo per determinati dispositivi o larghezze (screen, print, (max-width: 768px) ecc.).

Esempio proprietà: @import

Codice Esempio: @import

CODE: CSS

1. /* Foglio principale (main.css) */

2. @import url("reset.css");

3. @import url("mobile.css") screen and (max-width: 768px);

5. /* Regole CSS locali */

6. body {

7.   margin: 0;

8.   padding: 0;

9.   font-family: system-ui, sans-serif;

10. }

Contenuto Esempio: @import

  
  /* Importazione semplice */
  @import url("base.css");

  /* Importazione condizionale */
  @import url("responsive.css") screen and (max-width: 768px);

  body {
    font-family: Arial, sans-serif;
    color: #333;
  }
  

⚠️ Nota sulle performance:
L'uso eccessivo di @import può rallentare il caricamento delle pagine rispetto al tag <link> in HTML. È comunque molto utile per organizzare i file CSS in fase di sviluppo o in progetti modulari.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser