Share
Mi piace usare a typography.css nei miei progetti; un file separato che contiene tutti gli stili tipografici strutturali di base di cui ho bisogno. Molto di ciò che si trova al suo interno è ovvio (dimensioni delle intestazioni, ad esempio), ma contiene anche cose meno ovvie che non voglio dimenticare. Facciamo il nostro lavoro attraverso la lista di controllo ...
La suddivisione dei file CSS è un flusso di lavoro ragionevole durante la creazione di un sito Web. Se si utilizza un preprocessore (come Sass), la suddivisione dei file in "partial" avviene in modo molto naturale. Se preferisci scrivere CSS old-school vanilla, ci sono ancora degli strumenti per aiutarti a compilarli in una build finale.
Nota: Giusto per essere chiari: non è una buona idea avere un sacco di file CSS separati nella build finale (molte richieste HTTP creano un collo di bottiglia per le prestazioni) quindi assicurati che siano uniti prima di distribuire!
In ogni caso, rompere il tuo CSS in partial significa che puoi facilmente riutilizzare pezzi di stile per nuovi progetti e rende la manutenzione un gioco da ragazzi.
Stiamo andando a costruire un typography.css così, anche se usiamo un reset CSS aggressivo, la nostra tipografia inizierà sempre in modo solido.
I caratteri vengono visualizzati in modo diverso a seconda del browser e della piattaforma utilizzati. Non possiamo mai far sembrare tutto uguale ovunque, ma iniziamo ottimizzando la nostra tipografia laddove possibile.
Molti tipi di carattere includono extra di lusso per migliorare la leggibilità. Legature, crenature e precisione geometrica non verranno spesso utilizzate dai browser in circostanze normali, ma possono essere utilizzate se si specifica in modo esplicito al browser di farlo.
I browser che girano su Mac OS X di solito fanno del loro meglio per rendere i font buoni, e i motori di rendering su piattaforme diverse a volte giocano a palla per tipo a 20px o più (la visualizzazione di caratteri piccoli con precisione è comprensibilmente più difficile).
Ecco il CSS:
body text-rendering: optimizeLegibility;
Questo dice al browser che, quando possibile, dovrebbe cercare di rendere le caratteristiche aggiuntive dei caratteri per migliorare la leggibilità. C'è comunque un piccolo costo di prestazioni. Se hai bisogno di andare oltre la velocità sulla qualità a volte, puoi usare anche il optimizeSpeed valore su alcuni elementi:
.foo text-rendering: optimizeSpeed;
Dove funzionerà? Quei tipi gentili di Mozilla hanno messo insieme una tabella di supporto del browser per rispondere a questo.
Il rendering dei font di default nei browser moderni è considerato da molti come ... carente. I personaggi sono spesso resi "un po 'spessi" (in particolare su OS X) a causa dei subpixel aggiuntivi che vengono utilizzati per smussare i bordi. Per questo motivo, molte persone usano quanto segue:
body -webkit-font-smoothing: antialiased;
In alternativa, puoi usare:
-webkit-font-smoothing: nessuno; -webkit-font-smoothing: subpixel-antialiased;
Come abbiamo menzionato, subpixel-antialias è ciò che i browser moderni tendono ad usare come predefinito, nessuna disattiverà completamente il rendering più uniforme.
Attenersi a antialiasing e i tuoi progetti perderanno qualche chilo, ma come sottolinea James Koster, input e pulsanti a volte ignoreranno le tue istruzioni.
Il pulsante e l'input ti ignorano. Lo sosterrai per questo?! Affinché ingressi e pulsanti possano essere riprodotti, è necessario essere più specifici:
body, input, button -webkit-font-smoothing: antialiased;
Smistato. Codepen Aggiornare: Come sottolineato da Retrovertigo nei commenti, Firefox OS X ora ha la sua addizione prefissata per giocare con:
p -moz-osx-font-smoothing: grayscale;
Questo ha un effetto simile al rendering antialiased di WebKit. Con tutto ciò detto, tuttavia, sii avvisato che lamentarsi delle proprietà di font rending potrebbe non essere l'approccio più saggio a lungo termine.
Scendendo dal mercato, probabilmente inizierai la tua traduzione tipografica impostando la dimensione del carattere di base, l'altezza della linea e la famiglia di font. Di solito lo eseguiamo su o il elemento con la dichiarazione stenografica:
html font: 100% / 1.5 Arial, sans-serif;
Questo ci imposta con la nostra dimensione di base al 100% del valore predefinito del browser (di solito 16px), ci dà un 1,5 unitario per l'altezza della linea, quindi imposta il nostro stack di font. Puoi leggere di più su questo "100%" di default verificando di prendere Ems ancora più avanti su Tuts+.
Andando avanti, il prossimo pit stop tipografico è spesso il titolo. Ce ne sono sei da installare, ognuno dei quali viene utilizzato per titoli con vari gradi di importanza.
Per determinare quali dimensioni devono essere le intestazioni, è necessario calcolare una scala modulare. Useremo un insieme di valori non complicato, basato su una versione legacy di normalize.css di Nicolas Gallagher (che potresti usare comunque).
h1 font-size: 2em; / * 2 * 16 = 32 * / h2 font-size: 1.5em; / * 1.5 * 16 = 24 * / h3 font-size: 1.17em; / * 1,17 * 16 = 18,72 * / h4 dimensione carattere: 1em; / * 1 * 16 = 16 * / h5 font-size: 0.83em; / * 0.83 * 16 = 13.28 * / h6 font-size: 0.75em; / * 0,75 * 16 = 12 * /
Questi valori sono in em, ma puoi vedere i valori di pixel equivalenti annotati nei commenti.
I paragrafi di solito formano le ossa nude di un documento HTML; il loro stile può creare o distruggere la leggibilità dei contenuti. Come minimo, richiedono una buona altezza della linea e una buona spaziatura.
p line-height: 1.5; margine: 0 0 1em;
La spaziatura dei paragrafi in questo modo ci darà questo:
Tuttavia, le pubblicazioni stampate (come, sapete ... libri) più spesso vanno con i paragrafi rientrati, che possiamo ottenere usando il seguente:
.indent p margin: 0; .indent p + p text-indent: 2em;
Questo rimuove il margine, applicando invece un rientro su tutti tranne gli elementi del primo paragrafo (usando un selettore di pari livello).
L'unico problema che presenta è che ora non c'è margine in fondo al paragrafo finale; tutti i seguenti elementi sarebbero schiacciati contro di esso. Per fortuna, questo può essere risolto. Harry Roberts suggerisce Mo Robust Paragraph Indenting ed è una tecnica che adoro usare:
p line-height: 1.5; margine: 0 0 1em; .indent p + p text-indent: 2em; margin-top: -1em;
Qui puoi vedere che conserviamo lo stile originale nei nostri paragrafi, il margine in fondo è ancora lì su tutti loro. Tuttavia, questa volta applichiamo un margine superiore uguale negativo su tutto tranne il primo paragrafo, che devia l'intero lotto fino a chiudere le lacune.
In questa epoca di layout fluidi, le nostre misure (larghezza delle linee) cambiano costantemente. A differenza del mondo statico della stampa, non possiamo specificare manualmente le interruzioni di riga per mantenere le cose in ordine. Il supporto CSS per la sillabazione non è ancora ottimo, così tante persone seppelliscono personaggi nascosti all'interno del loro contenuto che fungono da soft hyphens (), suggerendo dove una parola dovrebbe essere divisa se necessario. Gli aspetti pratici di questo sono orribili.
Per fortuna le cose stanno migliorando. Il word-break la proprietà è supportata da Chrome e dai vecchi IE, inoltre il supporto futuro è all'orizzonte per la sillabazione CSS3. Le particolarità di tutto questo sono trattate molto bene da Kenneth Auchenberg, ma per il momento, ecco la sillabazione CSS cross-browser in tutta la sua gloria:
p word-break: break-all; / * Non standard per webkit * / word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; trattini: auto;
Aggiornare: Ancora una volta, grazie al retrovertigo per averlo indicato; IE8 supporta effettivamente il none-prefisso word-break. Vedi developer.mozilla.org per ulteriori informazioni.
Come sono i tuoi collegamenti ipertestuali? Per impostazione predefinita, la maggior parte dei browser visualizza un collegamento attivo con una sottolineatura. Questa è diventata una norma così consolidata, che è meglio avere una buona ragione per rimuoverlo! Allo stesso modo, gli utenti si aspettano che le parole sottolineate all'interno della copia si colleghino da qualche parte, quindi non sottolineare le parole casuali per enfatizzare.
Inoltre degno di nota è il : visited stato dei collegamenti (un colore diverso è utile, anche se questo è tutto ciò che puoi controllare) e il : hover stato.
a, a: visited text-decoration: underline; a: hover text-decoration: none;
Alcune persone sostengono che una sottolineatura ostacola la leggibilità di un link, quindi in alternativa puoi usare a border-bottom invece, che aumenterebbe lo spazio tra linea e lettera.
Inoltre, (come mi ha ricordato Bowie nei commenti) dovresti davvero includere il :attivo e :messa a fuoco pseudo classi. Questi stati non sono di grande aiuto per l'utilizzo del mouse (motivo per cui talvolta li dimentico) ma per l'utilizzo della tastiera tramite tastiera o per l'accesso tramite altre tecnologie assistive, vale la pena di definirlo.
Nota: Puoi anche includere un : Focus: hover se ti senti un po 'ossessivo!
/ * indica l'accessibilità http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htm * / a: active color: tomato; a: focus border: 1px punteggiato di pomodoro;
Un'ultima nota, mentre siamo in tema di ancore, è che potrebbe essere un buon posto per impostare lo stile per collegamenti di vario tipo. Se lo si desidera, utilizzando i selettori di attributo CSS, è possibile personalizzare i collegamenti esterni in modo diverso o, eventualmente, i collegamenti che conducono a un download:
a [href $ = ". zip"] color: tomato;
A meno che tu non abbia resettato tutti i tuoi stili allo zero assoluto, probabilmente il browser ti ha coperto, ma è una buona idea accertarti delle tue basi. Fare il vostro fortes si distinguono? Sono i tuoi ems ha sottolineato?
strong font-weight: bold; em stile font: corsivo;
Usiamo un * lotto * di elementi su Tuts +, quindi non è qualcosa che dimenticherò mai, ma i tuoi hanno una configurazione di stile simile a un codice e leggibile?
codice, pre font-family: monospace, serif; dimensione carattere: 1em;
Molto bella. Il nostro buon amico, il font Monospace, assicura che ogni personaggio sia facilmente distinguibile, da qui il suo uso negli editor di codice di tutto il mondo. Includiamo il selettore di elementi anche qui; "codice" dovrebbe essere usato per i frammenti inline, "preformattato" dovrebbe essere usato per i blocchi di codice (le interruzioni di linea, ecc. sono piacevolmente osservate).
Per inciso, mi piace sempre il modo in cui Bootstrap disegna gli elementi del codice:
Ovviamente è stilistico, ma dammi un bel colore di sfondo arrotondato sui miei frammenti in linea ogni giorno ...
Non devi esagerare con il tuo elementi, ma impostarli visivamente separatamente dal resto dei tuoi contenuti è importante. Punteggiano il flusso di un articolo, aggiungono interesse e aiutano con il ritmo.
Per non immergerti troppo a fondo con gli stili qui, evidenzia solo il fatto che sono dei blockquotes:
blockquote font-style: italic; blockquote: before content: "\ 201C"; display: blocco in linea; padding-right: .4em;
Questo dà loro uno stile corsivo (si spera che il font usato abbia una specifica variante in corsivo, invece di lasciarlo al browser per funzionare) quindi si appoggia su uno pseudo elemento per un virgolette.
Semplice. Quella virgoletta \ 201C d'ora in poi sarà sempre iniettato dinamicamente nei nostri blockquotes. Ogni ulteriore stile è interamente a te!
Lo styling per lo schermo è una cosa, ma quanto spesso hai veramente considerato cosa succede quando i tuoi utenti cliccano su "print"? Tendiamo a non vedere la produzione di carta, quindi tendiamo a non pensarci.
Facendo un passo fuori dal piatto di caldaia HTML5, possiamo applicare alcuni stili per prendersi cura di coloro che amano leggere su carta. Innanzitutto, annidiamo tutto all'interno di una stampa tipo di supporto:
@media print
Ora cancelliamo la lavagna assicurandoci che tutto sia stampato in nero, rimuovendo gli sfondi (non vogliamo sprecare toner su di essi) e rimuovendo eventuali ombre superflue. E sì, useremo !importante, che in realtà è piuttosto utile in questo caso e non dovrà mai essere sovrascritto.
@media print * background: transparent! important; colore: # 000! importante; / * Il nero si stampa più velocemente: h5bp.com/s * / box-shadow: nessuno! Importante; text-shadow: none! important;
Un paio di altre cose che selezionerò da HTML5BP riguarderanno la leggibilità sulla pagina stampata. Di nuovo, questi saranno annidati all'interno del nostro @media stampa, guarda:
p, h2, h3 orfani: 3; / * http://css-tricks.com/almanac/properties/o/orphans/ * / widows: 3; / * http://css-tricks.com/almanac/properties/w/widows/ * /
Queste proprietà si applicano specificamente ai media paginati (come la nostra "stampa") e non avranno alcuna influenza sullo schermo. Controllano il paging di un determinato documento, impedendo che le linee vaganti si trovino in cima a una nuova pagina, o sprecando in isolamento nella parte inferiore di una vecchia pagina.
Chris Coyier riassume bene.
widows = numero minimo di righe in un paragrafo diviso nella nuova pagina.
orfani = numero minimo di righe in un paragrafo diviso nella vecchia pagina.
Per esempio, vedove sono le ultime righe di un paragrafo, trovate nella parte superiore di una nuova pagina:
Questa è una vedova (citazione: Anton Ego, Ratatouille) Mentre orfani sono le prime righe di un paragrafo, trovate alla fine di una pagina:
Saluta Oliver Twist (citazione: Anton Ego, Ratatouille) La suddivisione di un paragrafo (o di una voce) in entrambe le situazioni interrompe il flusso del lettore, quindi le regole CSS di cui sopra assicurano che ci siano almeno tre righe in ciascun caso. In caso contrario, le vedove sono urtate alla pagina successiva, anche i paragrafi con orfani insufficienti vengono portati alla pagina successiva.
Infine, impediamo alla pagina di fermarsi immediatamente dopo un'intestazione (che sarebbe simile a questa :)
Gah. (citazione: Anton Ego, Ratatouille) Ancora una volta, abbiamo bisogno di quanto segue per sederci nel nostro @media stampa sezione.
h2, h3 page-break-after: evitare;
page-break-after può prendere un numero di valori. Noi abbiamo usato evitare che impedisce alla pagina di rompere dopo l'intestazione (tirando l'intestazione sulla pagina successiva). Essere consapevoli del fatto che questa proprietà un giorno farà spazio per il break-after.
Potremmo andare avanti all'infinito, ma ora è il momento di aprire il pavimento e ascoltare gli stili di base tipografici che usi tutti. Cosa manca a questa piastra?
Un articolo non è mai completo senza un pizzico di ulteriore lettura ...
Accentsconagua