Cosa sono -moz- e -webkit-?

-webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; 

Sono un principiante ai CSS e quando ho visto un codice CSS l’altro giorno, ho trovato queste righe. Nelle esercitazioni in cui ho imparato CSS, non ho mai visto nulla di simile a queste righe. Qualcuno potrebbe spiegarmi queste righe o darmi una fonte in cui potrei imparare a implementare linee come queste?

Queste sono le proprietà con prefisso vendor offerte dai relativi motori di rendering ( -webkit per Chrome, Safari; -moz per Firefox, -o per Opera, -ms per Internet Explorer). Generalmente vengono utilizzati per implementare nuove funzionalità CSS proprietarie, prima del chiarimento / definizione finale da parte del W3.

Ciò consente di impostare proprietà specifiche per ogni singolo browser / motore di rendering in modo da tenere conto delle incoerenze tra le implementazioni. I prefissi verranno, nel tempo, rimossi (almeno in teoria) poiché la prefissata, la versione finale, della proprietà è implementata in quel browser.

A tal fine, di solito è considerata buona prassi specificare prima la versione con prefisso del venditore e poi la versione senza prefisso, in modo che la proprietà non prefissata sostituisca le impostazioni di proprietà con prefisso del fornitore una volta implementate; per esempio:

 .elementClass { -moz-border-radius: 2em; -ms-border-radius: 2em; -o-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; } 

Nello specifico, per indirizzare il CSS nella tua domanda, le linee che citi:

 -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; 

Specificare le proprietà column-count column-gap , column-gap e column-fill per i browser Webkit e Firefox.

Riferimenti:

  • Modulo di layout multi-colonna CSS .
  • “In difesa dei prefissi dei fornitori” (Meyerweb.com) .
  • Elenchi di prefissi fornitore (Meyerweb.com) .

Cosa sono -moz- e -webkit-?

Le proprietà CSS che iniziano con -webkit- , -moz- , -ms- o -o- sono chiamate prefissi dei fornitori.


Perché i diversi browser aggiungono prefissi diversi per lo stesso effetto?

Una buona spiegazione dei prefissi dei fornitori viene da Peter-Paul Koch di QuirksMode :

Originariamente, il punto di prefissi dei fornitori era quello di consentire ai produttori di browser di iniziare a supportare dichiarazioni CSS sperimentali.

Diciamo che un gruppo di lavoro del W3C sta discutendo una dichiarazione sulla griglia (che, per inciso, non sarebbe una ctriggers idea). Diciamo inoltre che alcune persone creano una bozza di specifiche, ma altre non concordano con alcuni dettagli. Come sappiamo, questo processo potrebbe richiedere anni.

Diciamo inoltre che Microsoft come esperimento decide di implementare la griglia proposta. A questo punto, Microsoft non può essere certo che le specifiche non cambieranno. Pertanto, invece di aggiungere la griglia al proprio CSS, aggiunge -ms-grid .

Il prefisso del venditore dice “questa è l’interpretazione di Microsoft di una proposta in corso”. Pertanto, se la definizione finale della griglia è diversa, Microsoft può aggiungere una nuova griglia di proprietà CSS senza rompere le pagine che dipendono da -ms-grid.


AGGIORNAMENTO COME DELL’ANNO 2016

In questo post di 3 anni, è importante ricordare che ora la maggior parte dei venditori capisce che questi prefissi stanno solo creando un codice duplicato non necessario e che la situazione in cui è necessario specificare 3 diverse regole CSS per ottenere un effetto funzionante in tutto il browser è uno indesiderato.

Come menzionato in questo glossario sulla vista di Mozilla sul Vendor Prefix il May 3, 2016 ,

I produttori di browser stanno ora cercando di sbarazzarsi del prefisso del fornitore per le funzionalità sperimentali. Hanno notato che gli sviluppatori Web li stavano usando sui siti Web di produzione, inquinando lo spazio globale e rendendo più difficile il rendimento degli underdog.

Ad esempio, solo pochi anni fa, per impostare un angolo arrotondato su una scatola, dovevi scrivere:

 -moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 5px; border-radius: 10px 5px; 

Ma ora che i browser sono arrivati ​​a supportare pienamente questa funzione, hai davvero bisogno solo della versione standardizzata:

 border-radius: 10px 5px; 

Trovare le giuste regole per tutti i browser

Poiché non esiste ancora uno standard per le regole CSS comuni che funzionano su tutti i browser, è ansible utilizzare strumenti come caniuse.com per verificare il supporto di una regola su tutti i principali browser.

Puoi anche usare pleeease.io/play . Pleeease è un’applicazione Node.js che elabora facilmente il tuo CSS. Semplifica l’uso dei preprocessori e li combina con i migliori postprocessori. Aiuta a creare fogli di stile puliti, supporta i browser meno recenti e offre una migliore manutenzione.

Ingresso:

 a { column-count: 3; column-gap: 10px; column-fill: auto; } 

Produzione:

 a { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; -webkit-column-fill: auto; -moz-column-fill: auto; column-fill: auto; }