Share
Il CSS è un linguaggio relativamente semplice da imparare. Padroneggiarlo, dall'altra, può rivelarsi un po 'più difficile. La compensazione per le varie incoerenze del browser da sola può produrre un'emicrania. In questo articolo, demistizziamo cinque dei problemi più gravi che incontrerai quando crei applicazioni web.
L'abbiamo fatto tutti. Pensi a te stesso, "Wow, questo testo sarebbe fantastico se fosse rosso vivo." (davvero ??) Sfortunatamente, quando aggiungi lo stile necessario, il tuo testo rimane nero. Come mai?
Ci potrebbero essere un paio di motivi per cui i tuoi stili non hanno effetto. Inutile dire che può essere un problema sgradevole, specialmente per gli sviluppatori CSS principianti. Per prima cosa, visita il tuo file CSS e assicurati che non ci siano errori di battitura. Ho sprecato molte ore a smantellare i miei documenti solo per scoprire che ho sbagliato a digitare una parola. Ma se non hai sbattuto la testa contro il muro in una volta o l'altra, non ti è permesso definirti uno sviluppatore web! Molto probabilmente, hai a che fare con un problema di specificità. Prova ad aggiungere "!importante"accanto allo stile che non ha effetto, se funziona all'improvviso significa che hai sicuramente un problema di" peso ". Come buona prassi, non lasciare mai"! importante "in qualsiasi punto del foglio di stile. una modalità di debug. Considera il seguente esempio:
#wrap #myStyle color: black;
Perché qui c'è una maggiore specificità, il colore rimarrà nero. Includendo l'identificatore aggiuntivo, "#wrap", c'è più peso su questo selettore. Di conseguenza, il primo stile sarà ignorato a favore di questo.
Come possiamo risolvere questo problema? Dovresti prima controllare se il secondo stile può essere completamente cancellato. Se non può, devi semplicemente aggiungere più specificità al tuo selettore originale. Andremo oltre il concetto di specificità "in modo molto più dettagliato a breve. Proviamo ad aggiungere:
#wrap p # myStyle color: red;
Ora il testo diventerà rosso. Aggiungendo il selettore "p" aggiuntivo, abbiamo aggiunto un punto in più, annullando così qualsiasi altro stile.
Forse più di ogni altra cosa, il posizionamento può rivelarsi un argomento inutilmente confuso per i designer CSS principianti. Il modo migliore per imparare è affrontare prima il posizionamento assoluto. Supponiamo di avere un documento HTML e CSS vuoto. Se dovessimo quindi posizionare un'immagine assolutamente nella pagina - diciamo 100px dall'alto e 100px a sinistra dei bordi della finestra - potremmo scrivere il seguente stile ...
img position: absolute; in alto: 100 px; a sinistra: 100 px;
Gli elementi posizionati in modo assoluto sono posizionati in relazione agli elementi padre posizionati più vicino. In questo caso, dove non ci sono elementi relativamente posizionati nella pagina, l'immagine sarà posizionata in relazione alla finestra.
Ora, immagina di aver avvolto un div relativamente posizionato attorno alla nostra immagine.
Per impostare un contesto di posizionamento, dobbiamo aggiungere "position: relative" allo stile del nostro genitore div.
div # wrapper position: relativo; sfondo: grigio; / * Solo per vedere i bordi. * / Height: 600px; / * Poiché l'immagine è posizionata in modo assoluto, dobbiamo forzare l'altezza. * / Width: 770px; margine: auto;
Ora, quando posizioniamo l'immagine in modo assoluto, sarà posizionata "relativa" alla divisione "wrapper". Tieni presente che se rimuovessimo questa proprietà, l'immagine verrebbe nuovamente posizionata in relazione alla finestra del browser. La proprietà "position" è la chiave qui.
Chris Coyier analizza alcuni esempi pratici che mostrano esattamente come e quando utilizzare il posizionamento. Include una demo e un codice sorgente scaricabile.
Visita l'articolo
"Facciamo luce sui misteri oscuri del posizionamento CSS. Se le tue abilità CSS sono limitate o anche moderate, imparerai ciò di cui hai bisogno per padroneggiare il posizionamento".
Visita l'articolo
Per coloro che non hanno familiarità con il "Bug a doppio margine", se si fa galleggiare un elemento e si procede per aggiungere margini nella stessa direzione del float, Internet Explorer 6 raddoppierà il valore in modo errato. In effetti, un margine sinistro di "100px" diventa "200px" in IE6. Ci sono tre diversi rimedi che esamineremo.
Cambia la visualizzazione in linea. La soluzione più semplice, scoperta da Steve Clason, è quella di modificare la proprietà display del tuo elemento.
#floatElement display: inline; fluttuare: a sinistra; margin-left: 100px;
Usa commenti condizionali. Fortunatamente, cambiare il display risolverà quel brutto bug. Tuttavia, cosa succede se, per qualche motivo, hai bisogno di un metodo diverso? Internet Explorer ti consente di scegliere come target diverse versioni del browser utilizzando "commenti condizionali". Aggiungi il seguente nel tag head del tuo documento:
In parole povere, questo codice dice: "Se un visitatore della tua pagina utilizza Internet Explorer 6 o inferiore, importa un foglio di stile chiamato" ie6.css ". Di conseguenza, i browser moderni ignoreranno questa affermazione. IE 6 e seguenti, d'altra parte, implementerà il file. Ora, nel nostro file ie6.css, avremo bisogno di aggiungere un po 'di stile di override.
#floatElement float: left; margin-left: 50px;
Poiché sappiamo che IE 6 raddoppierà i margini sugli elementi flottati, se riduciamo il valore del margine del 50%, risolverà il nostro documento. Questo metodo è particolarmente appropriato quando hai molti stili che sono indirizzati direttamente a IE6. È importante contenere tutti i tuoi "hack" in una posizione centralizzata.
Implementa The Underscore Hack. Esistono molti modi per scegliere come target versioni precedenti di Internet Explorer direttamente dal nostro foglio di stile principale. In generale, preferisco usare i commenti condizionali. Tuttavia, se ho solo bisogno di modificare una singola proprietà, utilizzerò molte volte il trucco di sottolineatura. Considera questo quanto segue:
#floatElement float: left; margin-left: 100px; _margin-left: 50px;
I browser moderni passeranno in rassegna queste proprietà. Quando arrivano alla sottolineatura, salteranno completamente lo stile. D'altra parte, IE6 ignorerà il trattino basso e implementerà i nuovi margini. Ciò che finiamo con i browser moderni aggiungendo "100px" al margine sinistro. IE 6, rispettivamente, aggiungerà solo "50px".
Dustin offre una rapida spiegazione per superare questo bug. Assicurati di controllare anche i suoi tutorial correlati.
Visita l'articolo
Assicurati di dare un'occhiata a questo articolo di facile lettura se sei ancora un po 'confuso.
Visita l'articolo
Assolutamente! Tuttavia, pochissime persone conoscono l'equazione esatta. Molti di voi probabilmente utilizzano il metodo "continua ad aggiungere più identificatori finché non funziona". In pratica, funzionerà perfettamente. Ma dovresti sapere come calcolare il peso dei tuoi selettori senza sosta.
Innanzitutto, associamo ciascun tipo di selettore a un valore.
Proviamo a calcolare il peso del seguente stile ...
body #wrap div # sidebar ul li a.selected random styling ...
Facendo riferimento alla nostra calcolatrice sopra, analizzeremo questo selettore. L'elemento del corpo riceve un punto. Successivamente, abbiamo un identificatore (#wrap). Questo aggiungerà 100 punti al conteggio. Proseguendo, abbiamo "div # sidebar". Quanti punti pensi che valga? Se hai indovinato 100 punti, saresti errato. Devi prendere in considerazione l'elemento "div" nel tuo peso. La risposta corretta è 101 punti. Gli elementi "ul", "li" e "a" guadagnano un punto a pezzo. Infine, la classe "selezionata" riceve altri 10 punti. Aggiungendo tutto, arriviamo a una somma di 215.
Ti consiglio di dedicare qualche minuto e di memorizzare questo sistema di punti. Ti farà risparmiare una grande quantità di tempo perso quando ti ritrovi in un dilemma di specificità!
Per una spiegazione approfondita della specificità, consiglio vivamente di leggere questo articolo dall'alto verso il basso.
Visita l'articolo
Impara l'arte della specificità in una divertente ambientazione di "Star Wars". Questo è un must.
Visita l'articolo
Un passaggio obbligato quando si lavora su un sito è di rivederlo in ogni browser moderno: Firefox, Internet Explorer, Safari e Opera. Il secondo passo è quello di testare il tuo sito nella versione precedente di IE. Ti consiglio di scaricare IE Tester, che ti consentirà di visualizzare il tuo sito in IE 5 - IE 8. Il passaggio finale consiste nel controllare tutti i browser meno comuni. Visita BrowserShots.org per visualizzare istantanee del tuo sito in ogni browser disponibile.
Ti odio dover passare da IE a Firefox durante il test del tuo sito? Perché non scaricare IE Tab?
Visita l'articolo
Qualche domanda confusa che mi è sfuggita? Sono sicuro che ce ne sono molti. Lascia un commento e cercherò di incorporarli nella seconda parte. Spero di trasformare questi articoli in stile "Domanda e risposta" in una serie in corso.
Accentsconagua
