Experimentalia

Appunti raminghi

La terminologia CSS

with one comment

Da qualche giorno sto lavorando attorno a Git e mi sento monco perché non riesco ad afferrare la terminologia che ci sta dietro ed ogni volta che devo fare un push su un repository devo prendere in mano il manuale per controllare che non stia facendo qualche errore. Poi passa, ma ogni volta che devo usarlo la frustrazione aumenta.

Ovviamente Git non ha nulla a che fare con i CSS, ma la sensazione si è estesa a questi ultimi scrivendo l’ultimo post sui metodi di selezione del dom di MooTools. Ho deciso quindi di scrivere un breve cheatsheet su quest’ultimi mentre faccio incetta di termini anche per Git.

Visto che sono notoriamente pigro ho pensato di partire da un lavoro già fatto che inizialmente volevo limitarmi a tradurre. Ne ho ampliato un po’ il contenuto, considerate quello che segue una traduzione integrata o una libera interpretazione di http://nimbupani.com/css-vocabulary.html

Ho realizzato tardi che, per scrivere qualcosa di significativo riguardo i css, avrei dovuto conoscere l’esatto significato dei termini utilizzati. Spesso mi sono ritrovato a chiedere aiuto nei forum ed a restare bloccato chiedendomi come descrivere esattamente il mio problema.

Ho pensato che sarebbe stata una buona idea descrivere tutta la terminologia CSS comunemente utilizzata.

Se siete soggetti ad attacchi di panico quando le vostre scadenze si approssimano, specialmente se pensate che in quell’occasione potreste avere
problemi con i CSS, allora fareste meglio a mettere questa pagina tra i preferiti.

I termini

  1. Proprietà (Property): Lo stile da applicare ad un selettore, es. border.
  2. Valore (Value): Il valore da assegnare alla proprietà, es. 1px.
  3. Parola Chiave (Keyword): Un termine che è definito dalle specifiche CSS e quindi non deve mai apparire tra virgolette, es. red, dotted, solid.
  4. Unità di misura (Length Units): Le diverse unità di misura che possono essere applicate ad alcuni valori. Si dividono in unità di misura assolute o relative a seconda che la loro definizione sia legata a unità di misure reali piuttosto a misure che siano relative ad altri fattori, ad esempio la dimensione del font selezionato. Tra le relative secondo la definizione ricadono anche i pixel (px) perché la loro effettiva dimensione varia a seconda dello schermo e della risoluzione utilizzate. Io tendo a classificare questa unità di misura come assoluta.
    • Unità relative
      ch: dimensione del carattere 0 nel font corrente
      em: ampiezza del font corrente
      ex: altezza del font corrente
      px: pixel
    • unità assolute
      cm: Centimetri
      in: Pollici
      mm: Millimetri
      pc: Pica (misura tipografica ~4.233 mm)
      pt: Punti Punti tipografici, frazione di Pica
  5. Notazione Funzionale (Functional Notation): Qualunque valore specificato in forma di funzione (un identificativo seguito da valori tra parentesi). Viene utilizzata principalmente per specificare colori, URI, attributi e trasformazioni; Es:rgba(0,0,0,5),url('img.png'),attr('href'), scale(20)
  6. Dichiarazione (Declaration): L’insieme di proprietà e valore assegnato, es. background: red;
  7. Blocco di dichiarazioni (Declaration Block): Un insieme di dichiarazioni racchiuse tra parentesi graffe, es. {clear: both;color: sky;}
  8. Regola (Rule o Rule Set): Selettore/i seguiti da un declaration block, es. #lovelyweather { clear: both; color: sky;}
  9. Selettore (Selector): Il modo per indicare a quali elementi applicare gli stili. Ci sono differenti tipi di selettore che possono essere, e solitamente lo sono, concatenati.
    • Classe (Class):  .nome-della-classe E’ il selettore più comune, serve a selezionare quegli elementi che hanno una determinata classe. Es. .menuvoice seleziona tutti gli elementi che hanno classe menuvoice, anche se hanno anche altre classi associate.
    • ID: #id-dell-elemento Da usare con parsimonia. In ogni pagina web può esserci un solo elemento con un determinato id. Es. <div id=”lovelyweather”>
    • Selettore di Attributo (Attribute Selector): [attributo] o [attribute=valore] Per selezionare un elemento partendo dal valore di una sua proprietà, bisogna usare questo tipo di selettore che supporta anche il pattern matching. Es. a[href=http://example.com]
    • Pseudo Classe (Pseudo-Class): :pseudo-classe Sono classi applicate agli elementi in base ad informazioni non presenti nel markup, indicano, ad esempio, se una checkbok è selezionata, se il mouse è sopra un particolare link oppure se un link è stato già visitato. Es. input:checked, a:visited
    • Pseudo Elemento (Pseudo-Elements): ::pseudo-element Questa è una classe di selettore particolare. Non seleziona elementi quanto piuttosto parti di questo (es. ::first-letter) oppure permette di creare del contenuto da anteporre o accodare alla selezione (::before ::after). Alcuni browser supportano anche la sintassi :pseudo-element Es. #lovelyweather::before
  10. Combinatore (Combinators): La selezione di un elemento basato sulla sua relazione con un altro elemento. I combinatori sono una delle parti della specifica CSS peggio supportate da una certa famiglia di browser molto diffusa. Bisogna utilizzarli con attenzione.
    • Descent Combinator: Si tratta di quello più utilizzato. Seleziona un elemento solo se è un discendente di tutti quelli che lo precedono Es. #lovelyweather h1
    • Child Combinator: Seleziona un elemento solo se questo è un figlio
      diretto di un altro elemento. Es. #lovelyweather>h1
    • Adjacent Sibling Combinator: Seleziona l’elemento se è immediatamente
      adiacente ad un altro elemento. Es. #lovelyweather+h1
    • General Sibling Combinator: Seleziona l’elemento se è adiacente anche
      se non contiguo. Es. #lovelyweather~h1
  11. Regole-At o Regole-Alfa (At-Rules): Regole che cominciano con il carattere @, es. @import, @page, @media e @font-face
  12. Media-Features: Con media queries, è possibile applicare gli stili a seconda del supporto ad una o più caratteristiche del particolare dispositivo utilizzato per la visualizzazione. Un uso diffuso di una media feature è l’uso di min-width e max-width per determinare se si tratta di un device iOS&tm;
  13. Vendor-specific Extension:
    Dato per assodato che non sempre i diversi browser utilizzati aderiscono
    correttamente agli standard, tutti hanno delle proprietà specifiche che
    lo estendono. Solitamente iniziano con il segno -, es -moz-transition, -apple-user-drag, -ms-text-underline-position, -o-tab-size,-ktml-opacity

E questo per ora è tutto, a parte un link per gli automi a stati finiti che sono in voi, oltre che in me.

Written by Eineki

gennaio 20, 2011 a 6:05 am

Pubblicato su css, traduzioni, web

Tagged with , ,

Una Risposta

Subscribe to comments with RSS.

  1. Ciao
    Molto utile soprattutto per evitare vuoti di memoria e desiderano avere uno schemetto sul CSS.
    Grazie per la visita sul sito, spero ci tornerai a visitare (anche con pareri critici).
    Alfonso

    icefox

    gennaio 28, 2011 at 15:27 pm


Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: