Arrivo subito al dunque... Tempo fa proposi via mail al Working Group di CSS3 di rendere "multiple" ogni regola dei CSS. Mentre si sviluppa un file HTML ci si rende conto che la maggior parte degli elementi sono utilizzati per questioni prettamente grafiche, ad esempio quando si ha la necessità  di inserire background multipli:

<div>
        <div>
                 <div>
                         <h1></h1>
                 </div>
        </div>
</div>

Non si tratta di bad routine ma di un'evidente limitazione dei CSS2. Infatti, a questa situazione si è ovviato con l'introduzione del "multiple background module" dei CSS3.

background-image:url(),url(),url(),url();
<h1></h1>

e questo funzionamento lo ritroviamo anche nella nuova feature text-shadow:

text-shadow:0 0 5px red, 0 0 5px black, 0 0 5px white;

La mia idea riguarda la possibilità  di estendere i "valori multipli separati da virgola" anche agli altri attributi dei CSS:

#button3d {
             border:
                        2px black solid,
                        2px darkred solid,
                        2px red solid;
             background:pink;
               }

<button>ciao</button>

condizione attualmente riproducibile solo utilizzando 3 div annidati.

E la stessa logica dovrebbe essere applicata su padding, margin, width, height etc. Sarai d'accordo che sintetizzare "zuppe di tag :)" in singoli elementi semanticamente corretti, sarebbe una manna per ogni impaginatore, senza contare che spostare nei CSS quello che resta della grafica dell'HTML alleggerirebbe notevolmente connessioni e costi di banda, la manutenzione, etc.

Ritornando al w3, mi sono reso conto che sono piuttosto lenti già  per conto loro e le proposte nuove non le vedono bene al contrario lo sviluppo dei nuovi browser è molto veloce, e Mozilla, WebKit e Opera, vedono molto bene le nuove proposte (probabilmente WebKit in primis).

Perà, se si conoscono i gruppi di supporto, di richieste e segnalazione di bug, si sa anche che basta poco per essere totalmente ignorati
(a meno che tu non sia estremamente martellante). Quindi questa mail si sintetizza in una domanda di aiuto per scrivere insieme la richiesta di questa feature ai 3 browser sarebbe ottimo coinvolgere anche i lettori di Edit, per sperare di avere più successo nella richiesta.

Spero di non sembrarti arrogante, ma dopo tanti anni qualcosina credo di averla capita... questa mi sembra una buona idea e spero che tu ne convenga. Se lo ritieni opportuno, sentiti libero di pubblicare questa mail su Edit.

P.S: Il WG dei CSS ha proposto lo pseudo-element ::outside per ovviare a queste limitazioni:

#button3d { border:2px red solid;background:pink;}
#button3d::outside { border:2px darkred solid;}
#button3d::outside::outside { border:2px black solid;}

Ma io lo ritengo assolutamente non in linea con la logica funzionamento dei CSS... non è compatibile con i "cascading" style sheets, senza contare che è inutilmente macchinoso da scrivere.

Ti ringrazio in anticipo e comunque indipendentemente da cosa tu voglia fare, mi rendo conto che probabilmente si andrà  a proporre una cosa che non vedremo per anni; ma prima la si propone e prima ci sarà  il cambiamento, e al diavolo i browser che non stanno al passo... Il cloud computing diventerà  una realtà , e l'unica cosa che dovranno fare gli utenti, piuttosto che comprare software desktop da migliaia di euro, è scaricarsi un browser decente, e se non sono troppo fessi, lo faranno :D

Penso che la proposta sia molto valida. Non appena Bert Bos mi confermerà  l'iter per diventare Invited Expert del CSS Working Group la sosterrà senz'altro. Qualcuno vuole aiutarci in questa impresa? Aspetto risposte!

14 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

Variazione sul tema: jQuery E:has(F). Leggete la risposta di Boris Zbarsky! :LOL

Gabriele Romanato
Gabriele Romanato

Giorgio si é rivolto a me notando il fatto che sulle mailing list del W3C spesso gli implementatori di browser fanno la voce grossa quando arrivano proposte come questa. Ve ne siete accorti anche voi? Il fatto é che loro pensano spesso a quanta fatica dovranno fare per implementare una nuova proposta. È successo anche a me proponendo un selettore universale di attributo.

Gabriele Romanato
Gabriele Romanato

@andrea zilio border: ,,3px solid black; padding: ,10px; in realtà  avevo pensato ad inherit|none|e dimensioni varie in quanto non é ben chiaro che behaviour dovrebbe avere... un valore vuoto potrebbe significare "valore default" o "valore ereditato".. che ne dite? si sono io! xD sono sul sito w3 :cool: LOL! @lloyd e andrea se vogliamo definirlo "problema" potremmo dire che non c'é continuità  e la direzione verso cui si sta andando é contraddittoria visto che é stato "quasi" scelto ::outside perché non abbiamo #a{text-shadow:0 0 3px black;} #a::outside{text-shadow:0 0 3px red;} #a::outside::outside{text-shadow:0 0 3px white;} ? ma abbiamo valori multipli separati da virgola? e perché i background multipli e non l'elemento ::outside ? cioé, non é che io abbia le idee chiarissime, ma credo che bisogna perlomeno discuterne. come anche la direzione di applicazione dei valori così: border: 1px red solid, --outer pseudoelement 1px black solid, --inner pseudoelement o così? border: 1px black solid, --inner pseudoelement 1px red solid, --outer pseudoelement ciao!

Giorgio
Giorgio

Il problema (tecnico) é il seguente: Teoricamente l'HTML serve a definire la struttura del contenuto di una pagina mentre i CSS servono per la presentazione. Questi due livelli dovrebbero essere il più possibile separati. Nella pratica non é possibile ottenere molti effetti grafici usando solamente i CSS: molto spesso bisogna mettere mano all'HTML originale. Ad esempio: x rendere arrotondati gli angoli di un <div> bisogna racchiuderlo in almeno altri 3 div.Per realizzare, come nell'esempio, un pulsante 3D bisogna specificare + colori per il bordo e quindi racchiudere il pulsante fra più elementi per poter specificare bordi di colori differenti.Per mostrare K sfondi su un elemento bisogna racchiuderlo fra K - 1 elementi.ecc...E' proprio questo ciò che si vuole evitare: non si vuole dover modificare l'html x ottenere questi effetti. Il suggerimento che Giorgio propone come soluzione é quella di permettere, nelle prossime versioni dei CSS, di specificare più valori per ogni proprietà  CSS. Ad esempio specificando più bordi o più sfondi per un elemento. Il CSS W3C Working Group (seguendo la strada dei già  esistenti pseudo-elementi :before, :after, :first-line, ecc) pensa di poter risolvere alcuni di questi problemi con un nuovo pseudo-elemento ::outside che permette, tramite CSS, di "racchiudere" ogni elemento in quanti altri pseudo-elementi si vuole per applicargli quindi gli stili voluti. (qui i dettagli). (Altra soluzione che il W3C sta sviluppando é XBL. E' + complessa e non la si sta discutendo qui)

Andrea Zilio
Andrea Zilio

@9: anch'io non ho ancora capito, forse sono io che non sono un genio, però non ho afferrato...

Andrea
Andrea

Io invece temo di non aver afferrato ne il problema quanto la soluzione proposta...

lloyd27
lloyd27

Quindi, se ho intuito correttamente, avendo 3 pseudo-wrapper e volendo definire un bordo sull'ultimo e un padding sul penultimo bisognerebbe scrivere qualcosa tipo: border: ,,3px solid black; padding: ,10px; Non so... io vedo una soluzione con ::outside meno concisa, ma più comprensibile: div::outside(3) {border: 3px solid black;} div::outside(2) {padding: 10px;} Comunque fateci sapere cosa risulta dalla discussione ;) Perché non c'é dubbio che una qualche soluzione a questo problema dovrà  essere scelta :) P.S. Omonimia o lo stesso "Giorgio"? http://www.w3.org/Style/CSS/Tracker/issues/25 :D

Andrea Zilio
Andrea Zilio

dovrebbero funzionare esattamente come ::outside non c'é nessuna difficoltà  ossia, ad ogni "comma" é come se si creasse un elemento wrap all'esterno dell'elemento/degli elementi selezionato/i ciao

Giorgio
Giorgio

La mia opinione é che una soluzione di questo tipo sia adatta solo per alcune proprietà  come appunto background (che già  lo supporta, nei CSS3). Mentre trovo complicato un supporto generale a valori multipli. Con complicato intendo che si potrebbero creare situazioni ambigue o poco comprensibili. Ad esempio che succede se si definiscono 3 margin, 2 padding e 1 border? Per questo credo sia più conveniente (e forse anche + facile da implementare) lo pseudo-elemento ::outside. (A parte qualche eccezzione indolore come x background) Comunque credo sia utile portare avanti e discutere con chi mastica bene tutto ciò una proposta del genere ;)

Andrea Zilio
Andrea Zilio

La trovo una buona proposta!

Marco
Marco