Share
Quando si tratta di CSS, ci sono molte risorse e supposti "suggerimenti di esperti" sul web. Questi sono da "guru" non autoproclamati e autoproclamati che non hanno alcuna credibilità nel mondo del design. Sebbene possano avere punti validi, come si può sapere se una punta CSS è una risorsa valida o solo un hack non verificato?
Invece di affidarsi a fonti sconosciute per un consiglio, analizziamo in profondità i designer che hanno un eccellente background di design e hanno camminato. Questi suggerimenti CSS sono raccolti da alcuni dei designer più rispettati del pianeta. Hanno i portafogli per sostenere i loro consigli, così saprai che ogni bocconcino di consigli è della massima qualità.
Di seguito sono riportati 10 principi eccellenti che qualsiasi sviluppatore o designer di siti web può trovare utili, significativi o stimolanti. Prendi in considerazione questo saggio consiglio dei viaggiatori (e delle donne) che hanno percorso la lunga e difficile strada dell'eccellenza del design. Queste sono le vero maestri di CSS. Bevi in profondità dalle loro conoscenze e prendi la loro saggezza nella tua prossima avventura di progettazione.
Ciò che mi infastidisce di più della mentalità degli hacker CSS è che stanno attivamente cercando soluzioni complicate. Cerca e sarai trovato, se vuoi la complessità ti prenderà per la gola. Non ti lascerà mai andare, e neanche ti aiuterà.
Peter-Paul Koch è un padrino dello sviluppo web. Mentre è uno sviluppatore di vecchia scuola e la maggior parte del suo portfolio web era tra il 1998-2002, ha lavorato con artisti del calibro di Apple e altri pesi massimi. Ha scritto un libro su javascript, ma non pensare per un secondo che non abbia nulla da dire sui CSS.
Koch ha affrontato qualcosa che ogni designer e sviluppatore web dovrebbero seguire con zelo: mantieni il tuo CSS semplice. La semplicità è una cosa difficile da raggiungere, specialmente nel design CSS. Ci sono una miriade di hack CSS che si possono trovare per rendere tutti i browser uguali, indipendentemente dalla versione o dal tipo. Eppure c'è un difetto fondamentale nell'usare molti hack CSS. Con l'evolversi dei browser web, è molto più difficile stare al passo con le modifiche.
Koch fa un punto interessante sullo sviluppo per il web. Internet nel suo complesso è un posto molto imprevedibile, e cercare di indovinare il modo in cui funzionerà in futuro è una pessima strategia.
Il Web è un posto incerto. Non sarai mai sicuro che i tuoi siti Web funzioneranno nel modo esatto in cui desideri che funzionino, nemmeno quando applichi tutte le informazioni recenti su CSS, accessibilità e usabilità. Invece di cercare il falso benessere negli hack che sembrano tanto più confortevoli a causa della loro complessità, dovresti accettare l'incertezza come principio di base.
I browser non hanno un supporto CSS perfetto; soprattutto per le persone che hanno appena iniziato a imparare CSS, può essere irritante. Nondimeno gli hack CSS non sono la soluzione. L'accettazione del modo in cui il Web funziona attualmente è il modo migliore per andare perché manterrà i tuoi siti semplici.
Peter-Paul ha colpito qualcosa che suona vero non solo per i CSS, ma per lo sviluppo del web nel suo complesso. La semplicità è la chiave per l'efficienza nella codifica.
Jonathan Snook è un designer incredibilmente popolare di Ottawa, in Canada, che si è fatto conoscere negli standard e nel design del web. Ha preso parte a conferenze prestigiose come SXSW e ha pubblicato alcune risorse tecniche sul design attraverso Sitepoint.
Uno degli inquilini di Jonathan per codificare i CSS è quello di mantenere le dichiarazioni in un'unica riga.
La seconda potrebbe sembrare più carina ma sicuramente non mi aiuta a trovare nulla. Quando cerchi qualcosa in un foglio di stile, la cosa più importante è il set di regole (quella è la parte prima di e). Sto cercando un elemento, un ID o una classe. Avere tutto su un'unica riga rende la scansione del documento molto più rapida, come si vede di più su una pagina. Una volta trovato il set di regole che stavo cercando, trovare la proprietà che voglio è abbastanza semplice in quanto raramente ci sono molti.
Jonathan continua a dare un esempio per le dichiarazioni a linea singola che assomigliano a questo:
Buono
Font-size: 18px; bordo: 1px blu fisso; color: # 000; background-color: #FFF;
Male
h2
font-size: 18px;
bordo: 1px blu fisso;
color: # 000;
background-color: #FFF;
Questo approccio non solo aiuta a scansionare rapidamente il tuo CSS, ma aiuta anche a ridurre il tuo file CSS rimuovendo spazi e caratteri non necessari.
La maggior parte delle persone conosce e usa qualche stenografia, ma molti non fanno pieno uso di queste proprietà salvaspazio.
Roger Johansson conosce una cosa o due sulla progettazione per il web. Il web designer svedese ha lavorato su Internet dal 1994 e ha un famoso blog di web design. Quando si tratta di soluzioni semplici ed eleganti, Roger è uno dei più esperti nel suo campo.
Johansson ha un articolo molto approfondito sull'importanza della stenografia dei CSS e fornisce alcuni esempi su come usarlo durante la codifica dei CSS. Ecco un esempio:
L'utilizzo di una scorciatoia per queste proprietà può far risparmiare molto spazio. Ad esempio, per specificare diversi margini per tutti i lati di una scatola, puoi usare questo:
margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0.5em;
Ma questo è molto più efficiente:
margine: 1em 0 2em 0,5em;La stessa sintassi viene utilizzata per la proprietà padding.
Mentre la stenografia CSS riduce le dimensioni del foglio di stile, aiuta anche a organizzare e mantenere il codice semplice. Il bello CSS è semplice CSS.
Mr. Snook ha un altro consiglio fondamentale che ogni sviluppatore web dovrebbe vivere: consentire agli elementi di blocco di riempire lo spazio in modo organico. Se c'è un tema ricorrente nello sviluppo dei CSS, non forzare il codice a fare cose per cui non è pensato. Ciò significa evitare gli hack CSS e trovare la soluzione più semplice possibile.
La mia regola generale è che, se imposto una larghezza, non imposto margini o padding. Allo stesso modo, se imposto un margine o un riempimento, non imposto una larghezza. Affrontare il modello di scatola può essere un tale dolore, specialmente se si hanno a che fare con percentuali. Pertanto, ho impostato la larghezza sui contenitori e quindi impostato il margine e il riempimento degli elementi al loro interno. Tutto di solito si rivela perfettamente.
La regola empirica di Jonathan è ottima per garantire che i tuoi layout non si interrompano e che l'approccio più semplice venga utilizzato durante la creazione di layout con elementi di blocco.
Floating è probabilmente una delle cose più importanti da capire con i CSS, ma anche saper cancellare i float è necessario.
Trevor Davis potrebbe non essere un nome tanto grande come Zeldman o Snook nel mondo del design, ma merita sicuramente qualche menzione basandosi sul suo eccellente portafoglio di layout web. Il suo blog è una risorsa eccellente per qualsiasi sviluppatore web che vuole rispolverare le sue costolette di design.
Nell'articolo di punta di Trevor Le 6 tecniche CSS più importanti che devi conoscere, ha aggiunto un nugget che può far risparmiare molti mal di testa quando si utilizzano le colonne nei layout.
Ho creato una pagina semplice con due colonne mobili l'una accanto all'altra. Nell'esempio si noterà che lo sfondo grigio non contiene le colonne mobili. Quindi, la cosa più semplice da fare è impostare l'elemento che lo contiene su float. Ma ora vedrai che lo sfondo del contenitore non contiene l'area del contenuto.
Poiché il contenitore ha margine: 0 auto, non vogliamo farlo fluttuare perché lo sposterà su qualsiasi lato lo facciamo fluttuare. Quindi un altro modo per cancellare il float è inserire un elemento di compensazione. In questo caso, uso solo un div div set per cancellare: entrambi. Ora, ci sono altri modi per cancellare un float senza markup, ma ho notato alcune incongruenze con quella tecnica, quindi ho appena sacrificato un div vuoto.
A volte è più semplice gestire l'eccezione alla regola, piuttosto che aggiungere dichiarazioni per tutti gli altri elementi attorno ad essa.
La compagnia di Dan Cederholm, SimpleBits, è la centrale di una società di design. Dan ha lavorato con artisti del calibro di:
... e molte altre aziende web di alto profilo. Fortunatamente, Dan trasmette alcune delle conoscenze che ha imparato lavorando con questi enormi nomi sul suo blog su SimpleBits. Ecco una regola pratica per te web designer e sviluppatori: Se Dan Cederholm dice qualcosa, tu ascolti. Pensa a lui come a uno sherpa digitale, guidandoti verso la cima della tua montagna di design.
Mentre può sembrare controintuitivo mettere un negativo di fronte a qualsiasi dichiarazione (come margin-left: -5px), è in realtà una buona idea. Mr. Cedarholm spiega che l'utilizzo di margini negativi sugli elementi a volte è più semplice rispetto al dover cambiare ogni altro aspetto del design per farlo allineare nel modo desiderato.
Ci sono situazioni in cui l'utilizzo di margini negativi su un elemento può essere il modo più semplice per "spingerlo" fuori dal resto, trattando l'eccezione alla regola per semplificare il codice.
Puoi vedere il suo esempio di utilizzo del margine negativo corretto qui.
"Come faccio a centrare un layout a larghezza fissa usando i CSS?" Per quelli che sanno, è semplice. Per quelli che non lo fanno, trovare le due regole necessarie per completare il lavoro può essere frustrante.
Non è una sorpresa che Dan stia per fare questa lista due volte. I layout centrati sono in superficie un'idea molto semplice, ma per qualche motivo non funzionano sempre così facilmente come pubblicizzati. Concentrare i layout con i CSS può essere uno sforzo frustrante per un principiante se non l'ha mai provato prima.
Dan ha un metodo collaudato che usa spesso per ottenere il nirvana centrato.
#container
margine: 0 auto;
larghezza: xxxpx;
allineamento del testo: a sinistra;
Molti progetti moderni si basano su layout centrati, quindi l'uso di questo metodo sarà utile per sviluppatori e progettisti web.
Hai scritto XHTML e CSS validi. Hai utilizzato il modello di documento standard (DOM) del documento W3C per manipolare elementi di pagina dinamici. Tuttavia, nei browser progettati per supportare questi standard, il tuo sito sta fallendo. È probabile che sia colpa di DOCTYPE difettoso.
Jeffrey Zeldman è uno dei co-fondatori dell'eccellente sito di risorse A List Apart, co-fondatore e direttore di The Web Standards Project, gestisce lo studio di design Happy Cog e ha persino scritto il prenotare sulla progettazione per gli standard web. In breve, Zeldman è in cima ai web designer.
Il DOCTYPE di una pagina Web è uno degli aspetti più trascurati del design. Usare il giusto DOCTYPE è fondamentale, e Zeldman spiega perché.
L'utilizzo di un DOCTYPE incompleto o obsoleto o di DOCTYPE non è affatto positivo - questi browser si basano sulla modalità "Quirks", in cui il browser presuppone che tu abbia scritto codice e codice vecchio stile non validi secondo le deprimenti norme del settore degli ultimi anni '90.
Zeldman sottolinea l'importanza di a) effettivamente utilizzando un DOCTYPE e sottolinea che devi aggiungere un url nella dichiarazione in questo modo:
Se stai riscontrando problemi inspiegabili con i tuoi layout, le probabilità sono che il DOCTYPE potrebbe essere il problema.
Centrare gli oggetti è un compito frequente quando si progettano siti web. Ma per le persone che sono nuove ai CSS è soprattutto una sorta di enigma su come centrare per esempio un intero sito Web in browser diversi da IE.
Wolfgang Bartelme è un web designer con Bartelme design, una società di web design. Bartelme ha uno dei blog più eleganti e crea continuamente eccellenti icone e progetti di design. Ha svolto attività di progettazione per la piattaforma di blogging Squarespace, oltre al popolare evento software MacHeist.
Wolfgang ha creato un tutorial che aiuta con il complicato compito di centrare gli elementi con i CSS. Gli elementi centrati sono follemente utili, ma a volte sono difficili da ottenere dato il design. Il tutorial di Bartelme garantisce l'allineamento centrato scegliendo il DOCTYPE corretto e aggiungendo il suo voodoo CSS. Il codice non è niente di speciale e fa il lavoro, e cade direttamente in linea con la ricerca della semplicità nei CSS.
Trenton Moss conosce l'usabilità del web. Ha la sua società di usabilità web che forma le persone nella formazione sull'usabilità e nella scrittura sul web. Scrive anche per siti come Sitepoint. Trenton offre consigli eccellenti basati sulla sua esperienza come esperto di usabilità web.
È un dato di fatto che i progetti cambiano nel tempo, specialmente nel modo in cui il testo viene visualizzato sui siti web. La cosa migliore che un web designer può fare è pianificare il futuro per assicurarsi che invece di dover cambiare manualmente il modo in cui viene visualizzato il testo, è meglio usare i CSS per cambiare l'aspetto del testo. Trenton Moss ci mostra come ottenere ciò attraverso l'uso di un comando CSS semplice e sottoutilizzato chiamato text-transfom.
Uno dei comandi CSS meno conosciuti, ma veramente utili è il comando di trasformazione del testo. Tre dei valori più comuni per questa regola sono: text-transform: maiuscolo, text-transform: minuscolo e text-transform: capitalize. La prima regola trasforma tutti i caratteri in lettere maiuscole, la seconda li trasforma tutti in lettere minuscole e il terzo rende la prima lettera di ogni parola una lettera maiuscola.
Usando i CSS per visualizzare l'aspetto del testo sul sito, consente di cambiare in futuro e mantiene le cose coerenti nel tempo.
Questo comando è incredibilmente utile per garantire coerenza nello stile attraverso un intero sito Web, in particolare se ha un numero di editor di contenuti. Supponiamo ad esempio che la tua guida di stile imponga che le parole nei titoli debbano sempre iniziare con lettere maiuscole. Per garantire che questo sia sempre il caso, usa text-transform: capitalize. Anche se gli editori del sito dimenticano la capitalizzazione, il loro errore non verrà visualizzato sul sito web.
Mentre la trasformazione del testo è una piccola cosa da aggiungere per aggiungere a un layout css, può fare un mondo di differenza in futuro quando è necessario apportare modifiche.
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.
Accentsconagua