Versione stampabile della pagina html. Stampa stili CSS di cui mi ero dimenticato

Abbr:after ( contenuto: " (" attr(titolo) ")"; )

10. Forza la stampa in background

Intestazione ( -webkit-print-color-adjust: esatta; print-color-adjust: esatta; )

11. Query sui media

@schermo multimediale e (larghezza minima: 48 em) ( /* solo schermo */ )
Perché è così? Il fatto è che le regole CSS si applicano solo se il valore di larghezza minima è 48em e se il tipo di media è schermo. Se eliminiamo la parola chiave dello schermo in questa query multimediale, sarà limitata solo dal valore di larghezza minima.

@media (larghezza minima: 48em) ( /* tutti i tipi di media */ )

12. Stampa di carte

Mappa ( larghezza: 400px; altezza: 300px; immagine di sfondo: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-print-color-adjust: esatto; print-color-adjust: esatto; )

13. Codici QR

14. Informazioni sulla stampa di pagine non ottimizzate

tag:

• css
• sigillo
• sviluppo web

Questa è l'eliminazione degli errori chiamati "contenuti duplicati". Contenuti duplicati significa che contenuti simili vengono visualizzati in più punti (URL) su Internet. Di conseguenza, i motori di ricerca non sanno quale URL mostrare nei risultati di ricerca. Ciò può danneggiare il posizionamento della pagina web del sito. Il problema diventa più serio quando le persone iniziano a riferirsi diverse versioni contenuto. In questo articolo, spiegheremo le cause dei contenuti duplicati e troveremo soluzioni per ciascuno di essi.

Immagina di essere a un bivio e i segnali stradali ne indicano due direzioni diverse alla stessa destinazione finale: quale strada prendere? E se vai nella direzione "peggiore", anche la fine del percorso potrebbe cambiare leggermente. Come lettore, non ti interessa: hai il contenuto a cui miravi. Ma sistema di ricerca dovrebbe scegliere quale mostrare nei risultati di ricerca, poiché non dovrebbe mostrare lo stesso contenuto due volte.

Supponiamo che il tuo articolo sulla "parola chiave x" venga visualizzato all'indirizzo http://www.example.com/keyword-x/ e che lo stesso contenuto venga visualizzato esattamente all'indirizzo http://www.example.com/article-category/keyword-x / . Questo accade in molti sistemi moderni gestione dei contenuti (CMS). Il tuo articolo è stato ripreso da diversi blogger, alcuni con link al primo URL, altri con link al secondo URL. Questo contenuto duplicato è un problema per il tuo sito Web poiché i collegamenti pubblicizzano URL diversi contemporaneamente. Se si collegassero tutti allo stesso URL, la tua classifica dei primi 10 per "parola chiave x" sarebbe molto più alta.

1. Motivi per contenuti duplicati

Ci sono molte ragioni che causano contenuti duplicati. La maggior parte di questi sono tecnici: non capita spesso che una persona decida di pubblicare lo stesso contenuto in due luoghi diversi senza individuare la fonte originale. Tuttavia, le ragioni tecniche sono numerose. Questo principalmente perché gli sviluppatori non pensano come un browser o un utente, per non parlare del motore di ricerca web, pensano come uno sviluppatore. Che dire dell'articolo precedente che appare su http://www.example.com/keyword-x/ e http://www.example.com/article-category/keyword-x/? Se chiedi allo sviluppatore, dirà che è sola.

Diamo un'occhiata a come individuare i contenuti duplicati sul tuo sito Web, spiegare la causa e fare del nostro meglio per risolverlo.

1.1 Incomprensione del significato degli URL

Lo sviluppatore parla solo una lingua diversa. Puoi vedere che l'intero sito è probabilmente supportato da un sistema di database. C'è solo un articolo in questo database, Software il sito Web ti consente semplicemente di trovare lo stesso articolo nel database tramite più URL. Questo perché, agli occhi dello sviluppatore, l'identificatore univoco per questo articolo è l'ID articolo che si trova nel database, non l'URL. Tuttavia, per un motore di ricerca, un URL è un identificatore univoco per un contenuto. Se lo spieghi a uno sviluppatore, vedrà il problema. E dopo aver letto questo articolo, puoi immediatamente fornirgli la sua soluzione.

1.2. ID di sessione del visitatore

Quando monitori i visitatori e dai loro la possibilità di salvare gli articoli che desiderano acquistare nel carrello, dai loro una sessione. La sessione è fondamentalmente Storia breve ciò che un visitatore ha fatto sul tuo sito e può contenere cose come articoli in un carrello. Per salvare la sessione di un visitatore che si sposta da una pagina all'altra, è necessario memorizzare da qualche parte un identificatore univoco per questa sessione, il cosiddetto identificatore di sessione. La soluzione più comune è farlo con utilizzando i cookie. Tuttavia, i motori di ricerca di solito non memorizzano i cookie.

Alcuni sistemi stanno tornando a utilizzare gli ID di sessione nell'URL. Ciò significa che ogni collegamento interno sul sito Web ottiene questo ID sessione aggiunto all'URL e poiché questo ID sessione è unico per quella sessione, crea un nuovo URL e quindi duplica il contenuto.

1.3. Parametri URL utilizzati per il monitoraggio e l'ordinamento

Un altro motivo per contenuti duplicati è l'uso di parametri URL che non modificano il contenuto della pagina, ad esempio nei link di monitoraggio. Vedi, http://www.example.com/keyword-x/ e http://www.example.com/keyword-x/?source=rss non sono in realtà lo stesso URL per un motore di ricerca . Quest'ultimo può permetterti di tenere traccia delle fonti da cui provengono i tuoi visitatori, ma può anche renderti più difficile classificarti. Un effetto collaterale molto indesiderato!

Non si tratta solo del monitoraggio dei parametri, ovviamente, si tratta di ogni parametro che puoi aggiungere a un URL che non modifica un contenuto vitale. Questa impostazione è per "ricerca per set di prodotti" o "mostra una barra laterale diversa", che causano tutti contenuti duplicati.

1.4. Analisi e diffusione dei contenuti

La maggior parte dei motivi per contenuti duplicati sono tuoi o, almeno, per colpa del tuo sito web, quando altri siti web utilizzano i tuoi contenuti con o senza il tuo consenso. Non sempre si collegano al tuo articolo originale e quindi il motore di ricerca non lo "capisce" e deve occuparsi dell'ennesima versione dello stesso articolo. Più popolare diventa il tuo sito, più spesso lo raschierai, espandendo sempre di più questo problema.

1.5. Ordine dei parametri

Un altro motivo comune è che il CMS non utilizza URL belli e puliti, ma piuttosto URL come /id=1&cat=2 dove ID si riferisce a un articolo e cat si riferisce a una categoria. URL /? Cat=2 e id=1 produrranno gli stessi risultati sulla maggior parte dei motori del sito, ma in realtà sono abbastanza diversi per un motore di ricerca.

1.6. Impaginazione dei commenti

Nel mio WordPress preferito, così come in alcuni altri sistemi, è possibile impaginare i commenti. Ciò si traduce in contenuti duplicati all'URL dell'articolo e all'URL dell'articolo + /comment-page-1/, /comment-page-2/ ecc.

1.7. versione stampata

Se il tuo sistema di gestione dei contenuti crea pagine stampabili e le colleghi alle pagine dei tuoi articoli, nella maggior parte dei casi Google le troverà a meno che tu non le blocchi in modo specifico. Quale versione mostrerà Google? Quello che viene caricato con annunci e contenuti periferici o quello che contiene solo il tuo articolo?

1.8. con WWW e senza WWW

Una delle vecchie situazioni: un dominio con e senza WWW, contenuto duplicato quando sono disponibili entrambe le versioni del tuo sito. Un'altra situazione meno comune che esiste: http e https contenuto duplicato quando lo stesso contenuto viene inviato a entrambi gli indirizzi.

2. Soluzione concettuale: URL "canonico".

Come definito sopra, quando più URL portano allo stesso contenuto, questo è un problema, ma può essere risolto. Una persona che lavora per una pubblicazione di solito sarà in grado di dirti facilmente quale dovrebbe essere l'URL "corretto" per un particolare articolo. Ma la cosa divertente è che a volte quando chiedi a tre persone nella stessa compagnia, ti danno tre risposte diverse...

Questo è un problema che richiede una soluzione obbligatoria in questi casi, perché può esserci solo un indirizzo finale (URL). Questo URL "corretto" deve essere determinato dal motore di ricerca come URL canonico.

Nota ironica

Canonico è un termine derivato dalla tradizione cattolica romana, in cui un elenco di libri sacri è stato creato e accettato come autentico. Sono stati soprannominati i vangeli canonici del Nuovo Testamento. E l'ironia è questa: la Chiesa Cattolica Romana ha impiegato circa 300 anni e numerose battaglie per elaborare questa lista canonica, e hanno finito per scegliere 4 versioni della stessa storia...

3. Come trovare contenuti duplicati?

Potresti non sapere se hai contenuti duplicati sul tuo sito. Ecco alcuni modi per scoprirlo:

3.1. Strumenti per i Webmaster di Google

Lo Strumento per i Webmaster di Google è un ottimo strumento per identificare i contenuti duplicati. Se vai su Strumenti per Webmaster di Google per il tuo sito, consulta la sezione Aspetto della ricerca di Ottimizzazione HTML e vedrai quanto segue:

Il problema è che se hai un articolo che assomiglia a un articolo sulla "parola chiave X" e appare in due categorie, i titoli potrebbero essere diversi. Possono essere, ad esempio, " Parola chiave X - Categoria X - Sito di esempio" e "Parola chiave X - Categoria Y - Sito di esempio". Google non sceglierà questi titoli come duplicati, ma puoi trovarli con una ricerca.

3.2. Cerca titoli o frammenti

Ce ne sono diversi operatori di ricerca, che sono molto utili per casi come questo. Se vuoi trovare tutti gli URL sul tuo sito che contengono il tuo articolo con la parola chiave X, inserisci la seguente frase di ricerca in Google:

Sito:example.com intitle:"Parola chiave X"

Google ti mostrerà quindi tutte le pagine di esempio.com contenenti quella parola chiave. Più specificate questa parte del titolo, più facile sarà eliminare i contenuti duplicati. Puoi utilizzare lo stesso metodo per identificare i contenuti duplicati su Internet. Supponiamo che il titolo completo del tuo articolo fosse "Parola chiave X - Perché è fantastico", hai cercato: Intitle: "Parola chiave X - Perché è fantastico"

Google ti fornirà tutti i siti che corrispondono a quel titolo. A volte vale la pena cercare una o due frasi complete dal tuo articolo, poiché alcuni parser potrebbero cambiare il titolo.

4. Soluzioni pratiche per contenuti duplicati

Dopo aver deciso quale URL è l'URL canonico per i tuoi contenuti, devi avviare il processo di canonicalizzazione. Ciò significa sostanzialmente che dovremmo informare il motore di ricerca della versione canonica della pagina e fargliela trovare il prima possibile.

Esistono quattro metodi di soluzione, in ordine di preferenza:

1. Non creare contenuti duplicati;
2. Reindirizza il contenuto duplicato all'URL canonico;
3. Aggiungi un elemento di collegamento canonico alla pagina duplicata;
4. Aggiungere Collegamenti HTML dalla pagina duplicata alla pagina canonica.

4.1. Come evitare contenuti duplicati?

Alcuni degli errori di contenuto duplicati di cui sopra hanno correzioni molto semplici:

• Stai utilizzando gli ID di sessione nei tuoi URL? Spesso possono essere semplicemente disabilitati nelle impostazioni di sistema.
• Hai pagine duplicate da stampare? Questo è del tutto superfluo: devi solo usare un foglio di stile di stampa.
• Utilizzi l'impaginazione dei commenti in WordPress? Questa funzione dovrebbe essere semplicemente disabilitata (nelle impostazioni di "discussione") sul 99% dei siti.
• Parametri URL in ordine diverso? Chiedi al tuo programmatore di creare uno script che consenta di utilizzare i parametri nello stesso ordine.
• Problemi di monitoraggio dei collegamenti? Nella maggior parte dei casi, puoi utilizzare il monitoraggio della campagna basato su hash anziché il monitoraggio della campagna basato su parametri.
• Due versioni del sito con WWW e senza WWW? Scegli un'opzione e mantienila, reindirizzando l'una all'altra. Potresti anche preferire Strumenti di Google per i webmaster, ma dovrai richiedere entrambe le versioni del nome di dominio.

Se il tuo problema non è così facile da risolvere, potrebbe valere la pena fare del tuo meglio per evitare contenuti duplicati. Questo è sicuramente la migliore soluzione I problemi.

4.2. 301 reindirizzamento di contenuti duplicati

In alcuni casi, non è possibile impedire completamente al sistema che stai utilizzando di generare URL non validi per i contenuti, ma a volte possono essere reindirizzati. Tienilo a mente quando parli con gli sviluppatori. Inoltre, se ti stai sbarazzando di alcuni problemi di contenuto ricorrenti, assicurati di reindirizzare tutti i vecchi URL di contenuti duplicati ai rispettivi URL canonici.

4.3. Utilizzo di link rel="canonical".

A volte non c'è modo di eliminare la versione duplicata di un articolo, ma sai che è l'URL sbagliato. Per questo particolare problema, i motori di ricerca hanno introdotto l'elemento link canonico. Si trova nella sezione il tuo sito e si presenta così:

href="http://example.com/wordpress/seo-

Nel capitolo link canonico, pubblichi l'URL canonico corretto per il tuo articolo. Quando Google (o qualsiasi altro motore di ricerca che lo supporta) trova questo elemento di collegamento, esegue un reindirizzamento automatico: passando la maggior parte del valore del collegamento raccolto da questa pagina alla tua pagina canonica.

Questo processo è leggermente più lento del reindirizzamento 301 menzionato da John Muller di Google, cosa che puoi fare, il che sarebbe molto preferibile.

4.4. Torna al contenuto originale

Se non sei in grado di eseguire quanto sopra, potrebbe essere perché non hai il controllo della sezione sito che mostra i tuoi contenuti, aggiungere un link all'articolo originale nella parte superiore o inferiore dell'articolo è sempre una buona idea. Questo potrebbe essere ciò che vuoi fare nel tuo feed RSS: aggiungi un collegamento a un articolo in esso contenuto. Se Google trova più collegamenti che puntano al tuo articolo, scoprirà presto che questa è la versione canonica effettiva dell'articolo.

5. Conclusione: i contenuti duplicati possono essere corretti e devono essere corretti!

Il contenuto duplicato è ovunque. Questo è un processo che devi monitorare costantemente. Se tutto viene corretto in tempo, la ricompensa sarà numerosa. Tuo contenuto di qualità può salire alle stelle nelle classifiche semplicemente eliminando i contenuti duplicati sul tuo sito. Naturalmente, se hai bisogno di aiuto per identificare questi problemi, aiutare i tuoi sviluppatori a trovare soluzioni per risolvere problemi di contenuto duplicato o anche risolvere questi problemi per te, puoi sempre ordinare

In passato era solo lo standard per creare un collegamento o, per essere più precisi, un pulsante con l'etichetta "Versione di stampa". Sono necessari per fare una stampa su carta. La versione cartacea contiene tutto informazione necessaria, ma manca di elementi interattivi: pulsanti, moduli e simili.

Ciò significa che qualcuno manualmente o automaticamente utilizza uno script
prese il documento originale e, dopo aver rimosso da esso tutto il superfluo, ne creò una copia,
più conveniente per la stampa. Forse lavoro simile dovuto
trattare anche con te.

Soluzione: stampa fogli di stile

Una delle grandi caratteristiche dei CSS è la capacità di
creazione di fogli di stile destinati a una varietà di dispositivi
produzione. Siamo abituati a creare fogli di stile su cui visualizzare le pagine
schermo, ma non siamo ancora abituati a pensare ad altri mezzi di visualizzazione. E,
come confermano i riferimenti “versione stampabile”, circa la stampa del documento, noi
pensiamo solo a rappresentare il documento in modo diverso.

Ma ora non abbiamo nulla da temere, ora da creare versione stampata
documento, abbiamo solo bisogno di un documento ben strutturato e
foglio di stile stampabile!

Oggi puoi prendere qualsiasi documento (X)HTML e prepararlo
stampa con fogli di stile senza toccare il markup. E qui dentro
i problemi con la creazione e la sincronizzazione di due versioni appartengono al passato
documento, uno per lo schermo e uno per la stampa. E qual è il massimo
La buona notizia è che è facile da preparare.

Come aggirare il bug dell'elemento mobile

I browser della famiglia Gecko come Netscape 6.xo Mozilla hanno
problema con la stampa di elementi mobili lunghi (elementi mobili lunghi).
Se l'elemento mobile è uscito dalla pagina stampata, allora
la parte rimanente scompare completamente, non comparendo mai sul successivo
pagina.

Se il tuo sito è come "A List Apart", ad es. gli articoli in esso sono
in un grande blocco mobile, questo significa che i lettori quando
la stampa riceverà solo la prima pagina dell'articolo.

La soluzione, come ci si potrebbe aspettare, è sovrascrivere la proprietà
"fluttuante" nel blocco con il testo prima della stampa. Insomma, per tutti
elementi mobili impostano la regola di stile "float: none".
In questo modo, riporterai tutti gli elementi mobili alla normalità e
il documento verrà stampato come previsto, pagina dopo
pagina fino alla fine.

Quindi, questo è ciò che ho suggerito a Zeldman per l'ALA, e come
non appena lo ha fatto, il problema di stampa è scomparso. Per i browser della famiglia
Gecko questo bug non è stato ancora risolto (al momento della scrittura
articolo), ma può comunque essere facilmente aggirato con il metodo sopra proposto.

Mettiamoci in viaggio

Di seguito è riportato un foglio di stile "stampabile" che "A List Apart" ha risolto il problema della stampa di elementi mobili:

#menu ( display: nessuno; ) #wrapper, #content ( larghezza: auto; bordo: 0; margine: 0 5%; riempimento: 0; float: nessuno !importante; )

Buon inizio. Il foglio di stile viene rimosso completamente menu a destra Così,
che non viene stampato e imposta i bordi e i rientri
contenuto dell'articolo in modo che il testo su qualsiasi pagina
distanziati in modo uniforme da un bordo all'altro dell'area stampabile.

Il problema, come ho visto, è che troppi stili progettati per lo schermo sono finiti nel processo di stampa.

Osservando il contenuto del tag nuovi articoli sul sito ALA, troviamo (in mezzo al ripieno) le seguenti righe:

Abbiamo un file di foglio di stile, print.css , a cui è abituato
dispositivi di stampa"print" è stato specificato dal valore dell'attributo "media".
Il file del foglio di stile nucss2.css, che viene importato con
I costrutti @import per nasconderlo da Navigator 4.x utilizzeranno
quando si visualizza la pagina su qualsiasi dispositivo di output (attributo
media="tutti"). Può essere un display, una stampante, un proiettore, un sintetizzatore
discorso e così via. Dopo essersi dispersi, potremmo scrivere nel foglio di stile per
stampa direttiva per colore di sfondo pagine e specificare i caratteri in
pixel.

Articolo correlato: Set di base plugin per WordPress

Sarà un grande disastro? No, ma la maggior parte dei browser web
di default non stampa lo sfondo della pagina, ma le dimensioni specificate in pixel
i caratteri che sono così adatti per la visualizzazione su schermo non lo sono
utile per la stampa.

Quindi miglioriamo un po' il nostro foglio di stile di stampa e risolviamo alcuni altri problemi di layout.

Sfondi sbiancanti

Più colori vengono utilizzati per le voci di menu sul lato destro.
Ma poiché abbiamo nascosto il menu durante la stampa, non dobbiamo modificare nulla.
Questo ci salva immediatamente da un possibile mal di testa.

Poiché le stampanti non stampano in bianco, creeremo lo sfondo della pagina
bianca. Devi anche rimuovere tutto immagini di sfondo, quale
utilizzato per visualizzare la pagina.

Se chiediamo aiuto alla proprietà in background, decidiamo in un colpo solo
entrambi i problemi. Per rendere la soluzione più flessibile, impostare l'elemento
corpo sfondo bianco e lascia che gli elementi "wrapper" e "content" abbiano
sfondo trasparente (e quindi attraverso di essi Colore bianco
corpo):

body ( sfondo: bianco; ) #menu ( display: nessuno; ) #wrapper, #content ( larghezza: auto; margine: 0 5%; riempimento: 0; bordo: 0; float: nessuno !importante; colore: nero; sfondo : trasparente; )

Impostazione del colore primo piano(colore del carattere) non era assolutamente
necessario, ma è meglio non dimenticarlo. Quindi ora ne abbiamo due
elemento "non mobile" (#wrapper, #content) con Sfondo trasparente, e
pagina con sfondo bianco.

Potresti essere preoccupato per come Navigator 4.x gestisce il valore
"trasparente", ma naso più alto: NN4.x presta attenzione solo alle tabelle
stili che hanno l'attributo "media" impostato su "schermo". Così come
nel caso della direttiva @import, i nostri fogli di stile stampabili sono sempre
nascosto agli occhi ciechi di Navigator 4. Quindi, non c'è niente di cui parlare
preoccupazione.

Stampa la dimensione del carattere

Il foglio di stile generale imposta la dimensione del carattere su 11 pixel. Molto
cattiva selezione di stampa. La stessa famiglia di caratteri è Georgia prima,
e poi serif - ottimo per la stampa, poiché i caratteri serif
di solito hanno un aspetto migliore sulla carta. Solo la taglia deve essere cambiata.
font. Come questo:

corpo (sfondo: bianco; dimensione carattere: 12pt; )

"Aspetta!" probabilmente esclamerai. - "I punti sono malvagi!"

Ebbene, sì, l'ha detto, e aveva perfettamente ragione: non puoi
imposta la dimensione del carattere in punti. Quando si stampa la stessa applicazione dei paragrafi
ha lo stesso significato di molti decenni fa. Visto che ci stiamo preparando
foglio di stile da stampare, quindi imposta la dimensione del carattere per "body" su 12
i punti saranno corretti e naturali.

Naturalmente, tuttavia, puoi impostare qualsiasi dimensione desideri
Il carattere a 12 punti è il più comune. E poiché nella tabella generale
stili, sono riportate le dimensioni di tutti gli altri elementi della pagina rispetto a
dimensione nell'elemento "corpo", il nostro lavoro è fatto.

Marginia

Regole di stile esistenti impostate per i bordi sinistro e destro
(margini) della dimensione dell'involucro e degli elementi di contenuto al 5%. Ciò significa che su entrambi
i lati dell'articolo saranno " posto vuoto", e ciascuno di questi "spazio vuoto" sarà
essere il 10% della larghezza dell'area stampabile. Questa è una conseguenza del fatto che il blocco
il testo dell'articolo "contenuto" si trova all'interno del blocco di framing "wrapper", e
ognuno di essi ha margini del 5% a sinistra e lato destro.

Articolo correlato: Yandex.Scuola di Webmaster

Il foglio di stile generale originale specifica un rientro destro del 15% (padding)
per il blocco "contenuto". I confini ci hanno già dato il 10%, quindi dobbiamo
aggiungere un altro 5%. Questo è abbastanza facile da fare:

div#content ( margine sinistro: 10%; )

In un'altra soluzione, si potrebbero lasciare i margini (margine) all'interno
a riposo e aggiungere il 5% al ​​rientro sinistro (imbottitura). Dal blocco "contenuto".
non ha sfondo visibile, otterremmo lo stesso risultato.

Sfortunatamente, alcuni browser hanno problemi con l'adeguato
gestione dei rientri (padding), quindi sposta gli elementi nella pagina
meglio con l'aiuto dei bordi (margine).

Stampa i collegamenti

C'era una domanda difficile: cosa fare con i collegamenti ipertestuali? Ovviamente acceso
potrebbero non essere utili sulla stampa come su un monitor, ma spesso è importante
dare un indizio su ciò a cui si riferivano nell'originale. Quindi è quello che sono
inventato:

a:link, a:visited ( colore: #520; sfondo: trasparente; spessore del carattere: grassetto; decorazione del testo: sottolineato; )

Questo dà ai collegamenti un colore abbastanza scuro da essere vicino
nero a stampa in bianco e nero pur rimanendo rosso scuro
quando si stampa a colori. Carattere in grassetto e il trattino basso lo assicurano
il collegamento risalterà nel testo stampato.

In un browser che supporta pienamente la specifica CSS2, possiamo
visualizzare gli URL dei collegamenti dopo se stessi, facendo così un favore per quelli
chi sarà una stampa e un browser a portata di mano. Di seguito è la regola,
che si applica solo al blocco "contenuto", e quindi agli URL
gli altri collegamenti non vengono stampati:

#content a:link:after, #content a:visited:after ( content: " (" attr(href) ") "; font-size: 90%; )

Provalo nei browser basati su Gecko - Mozilla o Netscape
6.x. Sulla stampa, dopo ogni collegamento, vedrai tra parentesi i relativi
URL ad esso.

I browser che non comprendono questa regola di stile non ne avranno
effetti indesiderati - i collegamenti saranno ancora di colore rosso scuro,
sottolineato e in grassetto. Subito dopo il testo del collegamento non verrà visualizzato
il loro URL correlato, tutto qui.

Si noti che gli spazi prima e dopo le parentesi lo sono
parte della regola di stile: non dimenticare gli spazi, come dovrebbero
essere inclusi nel documento.

C'è un problema estetico con questa nuova regola. Il fatto,
che indica di inserire testualmente il valore dell'attributo nel documento
href.

Guardando il codice di qualsiasi pagina del sito Web A List Apart, ci occupiamo rapidamente
nota che ci sono molti cosiddetti "riferimenti relativi" del modulo
"/problemi/144". Saranno inseriti nel documento così come sono.
c'è, ma vorrei che fossero URL completi.

In questi casi, CSS3 può aiutarci. Qualsiasi selettore di attributo,
usando l'operatore ^= si selezionano gli elementi in base all'inizio di essi
valori degli attributi. Quindi possiamo scegliere qualsiasi attributo href,
iniziando con una barra e inserisci il testo da sostituire
valore esistente attributo.

#content a:after ( contenuto: " (//www.alistapart.com" attr(href) ") "; )

Questa regola converte tutti i valori di tipo "/issues/144/" in
"//www.alistapart.com/issues/144/". Questa regola non aiuterà
caso di URL relativi che non iniziano con una barra, ma
Fortunatamente, l'ALA non utilizza questo tipo di collegamento.

ATTENZIONE! IMPORTANTE! Come accennato, il selettore del form ^=
si riferisce ai selettori delle specifiche CSS3. Validatore CSS di
il consorzio W3 può solo verificare la conformità alle specifiche
CSS1 e CSS2. Senza comprendere il selettore specifico CSS3, il validatore lo farà
segnala un errore anche se il selettore non è in conflitto
raccomandazioni sulle specifiche.

Decorare la parte superiore della pagina

Guardando ancora il foglio di stile finale, I
ho scoperto che non mi piace molto l'"intestazione" della pagina. La questione era piuttosto
non nell'intestazione stessa, ma nella stessa "sottolineatura" del nome del sito. esso
la sottolineatura ovviamente finiva dove finiva l'immagine
intestazione. Improvvisamente mi è venuto in mente che sarebbe stato bello allungare questo
una sottolineatura su tutta la larghezza della pagina.