Qual è il migliore approccio nella definizione dei selettori all'interno di un foglio di stile? Di quali fattori tenere conto? Va bene privilegiare la leggibilità  e l'usabilità  del codice sacrificando, almeno entro limiti accettabili, le performance nel rendering della pagina? Possono essere così sintetizzati gli spunti di discussione che può suscitare un post come questo di Cory Schires. Il nostro si esprime a favore della pratica dell'annidamento profondo dei selettori CSS. (more...)

Continua a leggere Sull’efficienza dei selettori annidati

Categoria: CSS

Tags: , ,

Nel contesto del modulo CSS3 dedicato ai selettori, un'intera sezione è dedicata alle cosiddette pseudo-classi strutturali. Per l'esattezza, si tratta dei seguenti selettori: :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :empty. Le cose che ci si possono fare sono tante e interessanti. Si ha bisogno di selezionare un elemento che non ha elementi figli? Usiamo empty. Vogliamo selezionare l'ultimo elemento figlio di un altro elemento? Ecco pronto last-child. Per sapere se il browser che usate li supporta, è sufficiente una visita al pagina con il test per i selettori di CSS3.info oppure dare un'occhiata alla preziosa tabella di PPK. (more...)

Continua a leggere Pseudo-classi strutturali su IE via Javascript

Categoria: Scripting

Tante volte si guarda ai CSS e alla loro evoluzione solo in vista della possibilità  di applicare questo e quell'effetto visivo. E si dimentica quanto utili e potenti possano essere aspetti del linguaggio come i selettori avanzati. Certo, anche su questo punto non mancano le voci di quanti vorrebbero di più, ma con quello che si ha a disposizione già  oggi molto si può fare. Andy Clark, ad esempio, spiega come un uso accorto dei selettori di attributo possa in certi scenari tornare vantaggioso nella gestione delle immagini e della loro presentazione. Gli scenari proposti spaziano dalla possibilità  di applicare regole ad hoc alle immagini provenienti da un certo sito esterno a quella di formattare in modi specifici quelle contenute in una certa cartella del sito: <img src="thumbnails/promo-main-css.png" alt="" /> img[src*="thumbnails"] { /* Styles */ } I selettori di attributo usati negli esempi (rintracciano la presenza di una certa sottostringa nel valore dell'attributo) non sono parte della specifica CSS2, ma sono un'aggiunta introdotta nel modulo per i selettori dei CSS3. No, IE6 non li supporta :)

Continua a leggere Selettori di attributo CSS e gestione delle immagini

Categoria: CSS

Chi prova per la prima volta ad assegnare degli stili ad un documento XML spesso rimane frustrato dal fatto che i selettori di classe e ID sembrano non funzionare in nessun browser. La realtà  è che dato che XML non possiede alcuna DTD predefinita, gli attributi class e id non possiedono alcun significato speciale per un browser. Anche se si specifica una DTD per il documento in questione usando un elemento ATTLIST per ciascun elemento del documento la situazione non sembra cambiare. Questo si verifica per il fatto che i browser non usano un parser validante, e quindi verificano solo la "well-formedness" di un documento XML, ma non la sua validità . La soluzione consiste nell'usare i selettori di attributo invece che quelli di classe e ID. Quindi invece che #b1 scriverememo book[id="b1"], oppure price[class="special"] invece che .special. Si tenga presente, comunque, che i selettori di attributo hanno una specificità  inferiore rispetto a quelli di classe e ID. Quindi per ottenere l'effetto desiderato nella cascata dovremo in alcuni casi rinforzare le nostre dichiarazioni con la direttiva !important: book[id="b1"] { color: green !important; }

Continua a leggere I selettori di classe e ID in XML

Categoria: CSS

Tags: , , ,

Ho finalmente avuto il tempo di leggere e studiare con calma il post Performance Impact of CSS Selectors di Steve Sounders. Prendendo spunto da un'osservazione di David Hyatt (da noi già  ripresa) sulle migliori prestazioni garantite dall'uso di classi e id rispetto all'adozione massiccia di selettori alternativi (discendenti, sibling e child) e riprendendo analoghe prove svolte da Jon Sykes, Sounders ha messo su una batteria di test per verificare l'impatto sui tempi di resa della pagina delle varie opzioni offerte dai CSS in fatto di selettori. (more...)

Continua a leggere Sulle performance dei selettori CSS

Categoria: CSS

Non so se è una genialata o una delle tante cose che lasciano il tempo che trovano (potrebbe anche essere in effetti un'inutile genialata...). Parliamo di CSS Browser Selector una piccola libreria Javascript (appena 1kb) che potete scaricare da Github. Cosa fa? Semplice. Visualizzate la pagina ufficiale, date un'occhiata al codice HTML con Firebug, il Web Inspector di Safari/WebKit o altri strumenti simili per IE oppure Opera, in particolare all'elemento html. Noterete la presenza di una serie di classi: sono aggiunte, appunto, dalla libreria e nell'ordine indicano il motore di rendering del browser, il browser stesso, il sistema operativo, il supporto di Javascript. Ecco come si presenta sul mio Safari: class="webkit safari mac js" Ed ecco su Firefox: class="gecko ff3 mac js" Facile a questo punto capire cosa si può fare nei CSS. Sfruttando i selettori si possono a questo punto creare regole ad hoc per ogni singolo browser tra quelli supportati dalla libreria e anche per sistema operativo. Vogliamo uno sfondo giallo su Opera per Mac? Ecco come si fa: text message snooping .mac.opera body {background: yellow}

Continua a leggere Regole ad hoc con CSS Browser Selector

Categoria: CSS

Parlavamo ieri di Peppy, il selector engine con supporto completo dei selettori CSS3 appena presentato in versione beta da James Donaghue. Nel post dimenticavo di citare che da un po' di tempo anche l'ubiquo e infaticabile John Resig sta lavorando ad un progetto simile, Sizzle. Qualcuno, tra i puristi più puristi, potrà  storcere il naso di fronte a queste soluzioni: perché ricorrere a Javascript per implementare qualcosa che appartiene ai CSS? Beh, forse può contribuire a far cambiare loro opinione questo intervento di Eric Meyer (dire semplicemente che si tratta di un evangelist rispetto all'adozione dei CSS è poco...). Cosa sostiene? Intanto che non vede l'ora di poter mettere le mani sulla versione stabile di Sizzle per usarlo in maniera estensiva e che progetti simili possono rappresentare davvero un primo passo verso un nuovo approccio agli standard che potrebbe risultare molto proficuo. Perché? Semplice: spy iphone 4 le performance di queste librerie abbinate a quelle dei browser più recenti in fatto di Javascript rendono il loro utilizzo più che sensato in questo momento; potremmo finalmente implementare ora, subito, funzionalità  avanzate e utilissime dei CSS3 (e non solo); non c'è niente di male se usiamo l'engine Javascript del browser per estendere il supporto dei CSS; invece di aspettare i progressi dei browser nel garantire il supporto agli standard li facciamo avanzare noi, dal basso; i browser che non supportano Javascript non fruiranno di questi effetti avanzati? Già  ora i vecchi browser non hanno un supporto pieno dei CSS eppure non abbiamo per questo smesso di usarli...è la solita, vecchia storia. Tutti convinti?

Continua a leggere Javascript salverà  il mondo

Categoria: Scripting

Uno dei cardini dei CSS3 è rappresentato sicuramente dai selettori. Tanti e tali i benefici che mettono in mano allo sviluppatore che praticamente tutti i principali framework Javascript sulla piazza li supportano in modo totale o parziale. mobile spy software for iphoneChi voglia sfruttare i vantaggi e la potenza dei selettori CSS3 senza ricorrere ad uno di questi framework, può affidarsi ad una libreria dedicata (selector engine). L'ultimo emerso sui siti di social bookmarking è Peppy. Oltre al supporto completo per i vari selettori, promette anche prestazioni notevoli. La libreria (s può scaricare da questa pagina) è attualmente in beta. Al momento non è disponibile nessuna documentazione.

Continua a leggere Usare i selettori CSS3 con Peppy

Categoria: Scripting

"Bello, bellissimo, chissà  quante cose potrei farci... Peccato che il browser X non lo supporta e non lo supporterà  mai...". àˆ un grido di dolore a cui siamo/siete abituati. Prendiamo i CSS3. La specifica è ben lungi dall'essere giunta alla sua definitiva sanzione da parte del W3C, ma molte parti importanti sono già  implementate nei principali browser (per un quadro riassuntivo rimando all'ottimo CSS3.info o alle tabelle comparative di Quirksmode). Non sono pochi, dunque, quanti suggeriscono di adottare al riguardo una strategia centrata sul cosiddetto progressive enhancement. Così chiarisce il concetto Alessandro Fulciniti nell'articolo CSS3 a piccoli passi: Il primo e più importante concetto è che dovremo introdurre soluzioni simili attraverso quello che è il progressive enhancement, ovvero l'arricchimento progressivo. Dovremo fare quindi in modo che i browser capaci siano in grado di beneficiarne, ma garantire soprattutto che sugli altri browser non vengano compromessi aspetti fondamentali quali resa visuale, usabilità , accessibilità  e fruibilità  dei contenuti. (more...)

Continua a leggere Usare oggi i CSS3

Categoria: CSS

Le Refcards sono documenti in formato PDF che contengono informazioni "compresse" ed elegantemente organizzate inerenti ad una determinata tecnologia, come GWT o Eclipse. Firmata dagli autori Bear Bibeault e Yehuda Katz, è ora disponibile la Refcard che tratta uno dei più importanti componenti di jQuery (e di tutti gli altri framework): i selettori. Vengono trattate le sintassi di base, i selettori core, i selettori custom e come utilizzarli in combinazione con gli altri metodi offerti dalla libreria. Prima di effettuare il download, è però necessario effettuare una registrazione gratuita.

Continua a leggere jQuery Refcard per i selettori

Categoria: Scripting

Tags: ,