Share
Lavorare con i CSS può sembrare una battaglia costante. I browser cambiano sempre il modo in cui leggono il codice (* cough * Internet Explorer * cough *), e sembra che ci siano un sacco di piccoli "trucchi" CSS. Sebbene sia un linguaggio incredibilmente potente, può essere facilmente utilizzato in modo errato, cosa che condannerà il tuo sviluppo a una vita di imperfezioni.
Questo è probabilmente il problema numero uno con lo sviluppo web, dato che devi avere layout che sembrano uguali, indipendentemente dal browser utilizzato dal visitatore del sito per navigare nella pagina. Questo fatto può a volte sembrare la rovina della tua esistenza: ci sono differenze fondamentali nel modo in cui Internet Explorer esegue il rendering di una pagina, rispetto a Firefox. Mentre non è così male come loro Usato per essere, c'è ancora una bella differenza tra i browser.
È facile per gli sviluppatori Web impaginare la pagina nel loro browser preferito e non preoccuparti di come apparirà negli altri principali browser, poiché molto probabilmente non vedrai le differenze. (Sono uno dei principali responsabili di questo, a volte disegno il sito in Firefox e dimentico di controllare in IE fino a dopo averlo fatto!) Mentre ci sono alcuni metodi provati e veri per aiutare a salvaguardare i tuoi layout per il rendering del browser, il il modo migliore per garantire che tutto sembra costante è utilizzare semplicemente Browser. I Browsershot forniscono un'istantanea precisa di come appare il tuo sito su diverse piattaforme e browser, assicurandoti che nulla possa sembrare strano in un browser.
Mentre un buon numero di noi sviluppatori web hanno monitor per computer di grandi dimensioni - e sono piuttosto orgogliosi del fatto - una buona parte dei visitatori del tuo sito potrebbe non farlo. Puoi controllare i tuoi programmi di analisi per vedere le risoluzioni del browser del tuo visitatore e la loro portata (Google Analytics lo fa meravigliosamente). Tuttavia, c'è un mondo di differenza nel modo in cui un design appare in una risoluzione 1024x768 rispetto a una risoluzione 800x600. Può rendere quasi inutile un bellissimo design.
Recentemente mi sono imbattuto in questa realizzazione mentre stavo modificando il design per Trendfo. Una grossa fetta di visitatori del sito utilizzava browser più piccoli, causando il blocco parziale di alcuni annunci pubblicitari, con conseguenti minori clic e in definitiva meno entrate dal sito.
Contabilità per browser più piccoli significa che tutti dei tuoi visitatori sono felici e trovano le informazioni di cui hanno bisogno.
Se stai sviluppando un layout CSS da zero, potresti chiederti perché. Proprio come niente è nuovo sotto il sole, lo stesso vale per i CSS. Esistono molti framework CSS come il framework Blueprint e il Framework CSS 960. Questi sono creati per aiutarti a creare layout a prova di proiettile, senza dover iniziare qualcosa da zero. Questi layout hanno compatibilità cross-browser e sono stati rigorosamente testati. Davvero, a meno che tu non stia facendo qualcosa di totalmente radicale che ha bisogno di un codice personalizzato, basta usare un framework CSS.
Perché reinventare la ruota?
Può essere abbastanza facile non pensare al futuro quando sviluppiamo siti web. Spesso nominiamo le nostre classi CSS qualcosa di diverso ogni volta che sviluppiamo un sito, invece di creare una semplice classe CSS che riusciamo a riutilizzare ripetutamente per tutta la nostra progettazione, senza dover scavare ciò che abbiamo usato prima. Ciò garantirà che il design del nostro sito rimanga costante durante i cambiamenti di un design.
Potresti usare una classe generica come:
(Nota dell'editore: i doppi "diritti" sono il risultato di un bug nel nostro visualizzatore di codice, il codice corretto è ovviamente .right float: right.)
.a destra float: right
Per far sì che le cose vadano nella giusta direzione quando le vuoi. Quindi potresti scrivere ID DIV come:
Di solito uso almeno tre classi generiche quando creo un design di un sito:
.clear clear: both .right float: right .left float: left
Scommetto che non sapevi che la convalida del tuo codice HTML potrebbe influenzare anche il tuo CSS, vero? Bene, può Innanzitutto, non puoi convalidare il tuo codice CSS fino a quando non hai un codice HTML valido. In secondo luogo, ci sono molte istanze che il tuo codice HTML potrebbe causare i tuoi problemi, invece del tuo CSS. Spesso pensiamo che il nostro CSS altera il layout quando in realtà è un po 'di HTML malformato che rende il layout funky. Un DIV non chiuso qui, una classe CSS erroneamente etichettata ... potrebbe essere qualsiasi cosa. Assicurati che il tuo HTML venga estratto prima ancora di provare a diagnosticare un problema CSS.
Ero solito disturbare costantemente un amico per l'aiuto con i problemi CSS, mentre cercavo di risolvere i miei progetti. Mi chiedeva pazientemente ogni volta "Il CSS convalida? Se no, quali sono gli errori?" Non passò molto tempo prima che imparassi a convalidare il CSS prima di chiedere aiuto a Thomas in seguito, e di solito convalidare il problema risolto per me.
Se hai un codice CSS valido, hai molte più probabilità di avere un CSS che è molto più compatibile tra i browser ed è meno probabile che si rompa.
Spesso i nuovi designer usano immagini di sfondo di grandi dimensioni nei loro layout. Ad esempio, utilizzando un'immagine di sfondo da 3.000 px x 5.000 px da considerare qualsiasi possibile dimensione del browser. Invece di usare un'immagine veramente grande, potrebbero usare un'immagine molto piccola ripetuta con un tocco di magia CSS. La differenza è enorme: invece di caricare un'immagine da 200kb, è possibile caricare un'immagine di pochi byte di dimensioni e farla ripetere sul CSS in background.
Se hai un'immagine di sfondo molto grande, stai perdendo due modi:
A volte le immagini di sfondo di grandi dimensioni sono inevitabili, in particolare con la tendenza recente di progettazione di layout web illustrativi. Tuttavia, usare immagini ripetute o colori a tinta unita sullo sfondo è una pratica molto migliore.
Quando le persone imparano per la prima volta su una tecnologia, ne sono entusiasti e vogliono usarla ovunque, anche quando possono effettivamente andare contro ciò che funzionerà meglio per il progetto.
Come sviluppatori web, a volte possiamo essere coinvolti nel volere che la tecnologia faccia qualcosa di avanzato e specifico, quando in realtà possiamo usare una tecnologia diversa molto più facilmente. Ad esempio, a volte è molto più semplice utilizzare una tabella per organizzare i dati piuttosto che creare un layout basato su CSS complicato con DIV mobili e simili. Dobbiamo ricordare, il motivo per cui usiamo tecnologie come i CSS è perché dovrebbero accelerare i tempi di sviluppo. Quando inizia a rallentarci, forse stiamo andando un po 'fuori bordo.
Questo è un peccato capitale per gli sviluppatori web, e succede più di quanto vorresti sapere. Se stai costruendo un design, lo sarai quasi sempre vuoi mantenere separati CSS e HTML. Questo assicura che quando (si noti che non ho detto "se") si decide di cambiare il design del sito, non sarà necessario scavare attraverso l'HTML di ogni layout e trovare il rogue CSS collegato a un elemento inline.
Invece di usare questo:
collegamento
Dovresti spostare l'attività di stile in un foglio di stile esterno come questo:
collegamento
I CSS in linea dovrebbero quasi sempre essere evitati. È facile da usare e ottimo per i test, ma a parte questo probabilmente non lo si vorrebbe nel codice di produzione.
Hai mai visto un disegno con 12 diversi file CSS collegati ad esso? È un incubo per chiunque cerchi di apportare modifiche al layout. Non solo, rallenta il tempo di elaborazione di ogni file, in quanto il browser deve fare una richiesta per ogni singolo file. È preferibile utilizzare un semplice schema CSS che utilizza 1 o 2 file. Il tempo impiegato per analizzare 12 file rispetto a un singolo file è abbastanza significativo. Non solo, risparmierai il prossimo che dovrà apportare molte modifiche al tuo layout.
Nessuno vuole aprire 12 file per fare un semplice cambiamento in tutto il sito!
Glen Stansberry è uno sviluppatore web e blogger che ha faticato più volte di quanto avrebbe voluto ammettere con i CSS. Puoi leggere altri suggerimenti sullo sviluppo web sul suo blog Web Jackalope.
Piaciuto questo post? Vota su Digg sotto. Grazie!
Accentsconagua