Esiste un'alternativa ai CSS?


89

Esiste un linguaggio di formattazione del foglio di stile alternativo al CSS? O il CSS è l'attuale linguaggio unico per eseguire operazioni di formattazione del foglio di stile?

Ho esaminato la scrittura di CSS su Wikipedia ( http://en.wikipedia.org/wiki/Cascading_Style_Sheets ) e alcuni altri commenti sui CSS e mi sono scoraggiato per la mancanza di pieno supporto per CSS nei diversi motori di layout, quindi Sono solo curioso se esiste un'alternativa o devo imparare ad usare anche i filtri CSS.

Grazie per eventuali approfondimenti.


10
CSS se va bene *, è IE che non funziona. (* CWG escluso)
annakata

75
Se solo ci fosse un'alternativa ... Rabbrividisco al pensiero della quantità di sforzo umano che è stato sprecato cercando di fare cose in CSS che dovrebbero essere semplici ma non lo sono ...
PeterAllenWebb

8
la cosa divertente è che devi digitare style = "text / css" nei tag relativi allo stile ... :)

3
Non è nemmeno per i programmatori. Nella programmazione, hai un ordine di esecuzione disposto dall'alto verso il basso nel tuo documento. In CSS non hai nemmeno quello. Hai un sacco di proprietà a cui si accede ciecamente e che vengono applicate a un documento completamente diverso, una rete di stringhe complessa e statica che non puoi iniziare ad analizzare finché non trovi il front-end. Non puoi dire da dove provengano alcuni effetti perché le cose sono ciecamente a cascata in tutto il documento.
GameKyuubi

1
CSS è dichiarativo perché il Web è fluido (l'utente è su un monitor gigante, un laptop, uno smartphone o uno screen reader?), Quindi i grafici non possono utilizzare le tecniche a cui sono abituati, ad esempio, in Photoshop, dove la dimensione della tela è sotto il loro controllo. Allo stesso modo, poiché diversi programmi utente vengono visualizzati in modo diverso, devi dire "Ecco cosa voglio" invece di "ecco come farlo", come farebbe un programmatore di computer. Questo non vuol dire che i CSS non possano utilizzare molti miglioramenti e diventare più facili da usare; solo che deve essere di natura diversa da ciò a cui sono abituati sia i progettisti che i programmatori.
Canuck

Risposte:


64

CSS è l'unica vera opzione.

Il supporto del browser per i CSS non dovrebbe essere una delle principali preoccupazioni (nella maggior parte dei casi) una volta appresi i dettagli del CSS. La chiave per capire i CSS è che il suo scopo è definire lo stile di un documento HTML e dovrebbe essere separato dal contenuto.

Avrai bisogno di pratica per imparare a far degradare le cose con grazia nei browser che non supportano le funzionalità. L'idea di base qui è che dovresti fare in modo che il minimo comune denominatore (di solito Internet Explorer) funzioni "abbastanza bene" da non togliere nulla all'esperienza dell'utente e fornire le sottigliezze agli utenti con browser migliori. Inoltre, non sviluppare prima per Internet Explorer. Lascialo per ultimo, quindi correggi i suoi bug. Fare le cose al contrario (IE prima) è molto più difficile.

Hai anche la possibilità di utilizzare JavaScript per impostare gli stili, ma ciò non è consigliato perché dovresti evitare di applicare stili all'interno di JavaScript poiché JavaScript è pensato per la logica, non per gli stili.

Ci sono 3 componenti (a seconda di come la guardi) in una pagina web:

  • HTML - per i contenuti
  • CSS : per lo styling dei tuoi contenuti
  • JavaScript : per applicare logica aggiuntiva o dinamica ai tuoi contenuti

19
La linea chiave è la seconda frase: "Il supporto del browser per CSS non dovrebbe essere una delle principali preoccupazioni (nella maggior parte dei casi) una volta che impari i dettagli del CSS". Le persone che si lamentano di più del fatto che i CSS non funzionano lo sanno meno.
Rob Allen,

1
+1: ... per un'ottima risposta. Il suggerimento di codificare prima secondo gli standard e poi correggere i bug nel rozzo motore di rendering di IE è sicuramente il modo per farlo.
Jon Cage,

Quando conosci bene i CSS, IE7 si comporta piuttosto bene. @Rob: ascolta, ascolta +1.
Ryan Florence

1
creare un'applicazione con css è una vera tortura per uno sviluppatore di app. tuttavia, ad eccezione di Cappuccino.org, ci sono stati pochissimi tentativi per risolvere questo problema molto ovvio. ci sono voci secondo cui xcode produrrà presto html5, se ciò accadrà, metterà fine a questo caos, non perché xcode sia il migliore, guiderà gli altri a implementare gli SDK per il web ei browser verranno forniti con componenti dell'interfaccia utente ( useranno ancora css e html per visualizzarlo ma chi se ne frega, non li vedremo / useremo / li conosceremo / impareremo)
Devrim

3
@ RobAllen Dico la stessa cosa di Malbolge, il mio linguaggio di programmazione preferito. Le persone che pensano che sia impossibile semplicemente non lo sanno abbastanza bene da rendersi conto di quanto sia fantastico.
AR

71

State tutti cercando di rispondere alla domanda dal punto di vista di un programmatore. Penso che il poster originale cercasse un'alternativa più adatta alla grafica, che offrisse un concetto diverso.

Anche se CSS3 viene adottato cross browser, credo che il modo CSS di disporre le cose (inline box, float, margini, ecc.) Sia orribile. Sono un programmatore, ma mio padre è un grafico e sono abbastanza sicuro che il software di layout che usavano da 20 anni era per certi aspetti più semplice e avanzato dei CSS.


9
Esatto! CSS ee il flusso di lavoro cognitivo del layout grafico non è sullo stesso livello di astrazione.
Alex

6
IMHO, questa risposta è così
sottovalutata

13
"Mio padre è un editore e grafico, e io mi sono immerso nel design grafico sin dalla più piccola età, e oso dire che il software di pubblicazione che usavano 20 anni fa era più avanzato e facile da usare dell'HTML / CSS di oggi." ... La differenza è che tuo padre non progettava per schermi di dimensioni diverse, lettori di schermo, versioni di browser diverse (con capacità diverse), ecc. Progettare per la stampa è molto, molto più semplice che progettare per la visualizzazione dello schermo, e quindi CSS è più complesso dei linguaggi progettati per disporre i supporti di stampa.
J. Taylor,

1
Ho consigliato Postscript come lingua e PDF come veicolo di consegna. Sono stato picchiato e votato in modo viscoso. Ai droidi di SO non piacciono le opinioni.
ATL_DEV

1
@ J Taylor, perdilo, lo farai. Progettare utilizzando qualsiasi mezzo non è facile. È un'abilità, un'arte e una scienza tanto quanto lo è scrivere CSS e HTML. Per favore rispetta le arti. Postscript è stato progettato per gestire supporti di dimensioni diverse ed è in circolazione da decenni. Il punto centrale di HTML e CSS è fare in modo che il browser web visualizzi qualcosa che Postscript fa di default. HTML e CSS sono orribili!
ATL_DEV

42

, si chiama LESS e affronta davvero la maggior parte dei problemi di leggibilità del codice CSS.

È possibile compilare sia sul server o on-the-fly sul lato client con less.js .

Per la produzione, consiglio di impostare uno script di compilazione che lo compili (in NodeJS questo è un gioco da ragazzi con Grunt e grunt-contrib-less ).


Modifica: ci sono anche altre opzioni degne di nota, anche se sto usando e raccomandando LESS.

SASS : La gente di Ruby lo adora. Non è un superinsieme di CSS come LESS, ma utilizza invece la propria sintassi. Per far fronte a questo, hanno sviluppato SCSS, che è un superinsieme CSS ed è simile a LESS.

Stilo : come LESS, è codificato in javascript, ma è comunemente usato da Node.js. Non posso garantirlo, dal momento che non l'ho ancora provato, ma è molto maturo, quindi se ha una funzionalità che desideri, provaci.

Turbine : questo è stato codificato in PHP. Non molta trazione.

Cambia CSS : Forse gli hacker di Python vorranno esaminare questo. Ancora meno trazione.

Se ti senti ancora più alternativo, ci sono anche CSS Cacheer , CSScaffold , DtCSS , CSSPP e persino qualcosa di porneL .


Altre cose che potresti voler controllare:

Compass : un framework di authoring CSS completo per i ragazzi di Ruby.

WinLESS : un compilatore LESS drag & drop per Windows, è fantastico e dovresti davvero provarlo .

LESS Elements , Preboot , LESSHat e even.less : Librerie di mixin e costanti per LESS.

Bootstrap : un framework sviluppato da Twitter. Correlato anche: HTML5 Boilerplate .

Normalize.css : un'alternativa ai ripristini CSS . Ci sono molti ripristini, tuttavia, come lo sviluppatore di uno, devo dire: la maggior parte sono una schifezza. Se non hai intenzione di crearne uno tuo, usa questo.


Aggiornamento : dalla 1.4 , anche LESS lo ha @extend. Assicurati di utilizzare 1.4+ se possibile! Questo completa le ragioni per scegliere LESS rispetto a SASS, credo.


27
purtroppo questo non sembra essere un'alternativa al modello stesso.
n611x007

1
@naxa e perché dovresti volerlo? Il modello è fantastico (fogli di stile), l'implementazione è terribile (CSS). Questi strumenti affrontano solo l'implementazione, motivo per cui sono così popolari.
Camilo Martin

3
Perché la concorrenza aiuta il progresso. Cosa intendi per "fogli di stile"? Lo associo a cascata e file / sezione distinti dal testo. Ma c'è di più, il box model, che utilizza etichette e contenitori fusi nel testo (con html). C'è implementazione [in] dipendenza? - per esempio. i fogli di stile possono essere applicati a qualsiasi cosa tranne che html / xml? (E se scrivessi un foglio di stile e non volessi applicarlo a un testo non basato su gt / lt oa un formato binario? Se dovessi riutilizzare un'implementazione del foglio di stile o là fuori da solo?)
n611x007

@naxa quello che intendevo era, il concetto di avere lo stile separato dal contenuto è un ottimo modello, che è ciò che io chiamo "fogli di stile". E per implementazione intendevo la sintassi CSS, ma sono d'accordo che avere MENO invece di CSS è proprio come usare CoffeeScript invece di Javascript. E beh, ci sono formati di markup binari, quindi non vedo perché non potresti avere fogli di stile binari, ma se ci pensi probabilmente non verrebbero trovati con quel nome, perché i fogli di stile risolvono un problema umano (scrivere stili per molti documenti), non è un problema della macchina (o useremmo ancora i <FONT>tag).
Camilo Martin

5
Ho downvoted perché questi sono preprocessori, non alternative. Si sovrappongono a CSS e alla fine restituiscono CSS. Quindi è solo un livello di astrazione più alto, ma non un'alternativa.
ProblemsOfSumit

17

Sì.

Come tutti gli altri hanno detto, CSS è la tua unica vera opzione, ma esiste un altro linguaggio per "cose ​​di tipo formattazione foglio di stile" sul web, chiamato eXtensible Stylesheet Language (XSL), in particolare il sottoinsieme delle specifiche che divenne noto come XSL-FO (oggetti di formattazione) .

A un certo punto, a seconda di chi hai chiesto, era destinato a competere o collaborare con CSS .


1
Il W3C ha una buona sintesi della relazione tra XSL e CSS: w3.org/Style/CSS-vs-XSL
Patrick McElhaney


7

Il CSS diffuso non ha il pieno supporto in tutti i browser ... come dovrebbe un'alternativa (sconosciuta) raggiungere questo obiettivo?


3
Avendo un modello di layout che sia prevedibile, intuitivo e risolva i problemi nelle nuove versioni invece di lasciare negli errori.
AR

7

Ebbene, CSS 2.1 è supportato abbastanza bene da quasi tutti i browser. (eccetto IE6) È facile scrivere CSS degradati con grazia una volta che conosci il sottoinsieme sicuro. (In modo che anche i browser non supportati non rovinino completamente la pagina)

Vedere http://www.quirksmode.org per suggerimenti sulla compatibilità del browser CSS.


4
+1 per la modalità bizzarra: ogni utente che inizia con CSS deve saperlo. Aggiungerei che IE7 è piuttosto scadente anche con CSS2, e sfortunatamente la maggior parte del Web (e quasi tutte le reti aziendali) sono solo IE 6 e 7, quindi devi stare attento con CSS2.
Keith


6

si è scoraggiato per la mancanza di pieno supporto per CSS nei diversi motori di layout

Penso che jQuery abbia alcuni modi per rendere CSS più compatibile tra i browser, cioè se specifichi alcuni attributi usando jQuery, cercherà di assicurarsi di utilizzare una soluzione per i browser che non supportano determinate funzionalità.

C'è anche un progetto chiamato CleverCSS , potresti volerlo dare un'occhiata. Tuttavia, non è un'alternativa, solo un modo leggermente diverso di definirlo.


Purtroppo il collegamento è morto .. :-(
Agosto

4

Ho esaminato la scrittura di CSS su Wikipedia ( http://en.wikipedia.org/wiki/Cascading_Style_Sheets ) e alcuni altri commenti sui CSS e mi sono scoraggiato per la mancanza di pieno supporto per CSS nei diversi motori di layout, quindi Sono solo curioso se esiste un'alternativa o devo imparare ad usare anche i filtri CSS.

CSS è lo standard. Non ci sono alternative.

Tutti i browser supportano le funzionalità CSS di base. Ogni nuova versione di ciascuna delle (quattro?) Linee principali del browser viene fornita con un maggiore supporto per lo standard, ma i siti Web che utilizzano queste funzionalità verranno interrotti per tutti gli utenti in una versione precedente. Ci sono due risposte a questo:

  1. "Graceful degredation" (o il suo gemello, "Progressive enhancement" - google it), in cui la pagina sfrutta le funzionalità avanzate se sono disponibili, mentre continua a funzionare se non lo sono.

  2. Chi è il tuo pubblico? Se sei abbastanza fortunato da sapere che il 99,8% dei visitatori del tuo sito web utilizzerà almeno IE7, non devi preoccuparti delle funzionalità CSS che sono interrotte in IE6. Tuttavia, questo dipenderà dalla tua attività, quindi controlla prima i fatti.

La cosa peggiore che puoi fare è codificare le stranezze di un singolo browser specifico, perché questo porta a una pagina che è rotta non solo su altri browser, ma anche su versioni successive dello stesso browser.


4

Un'alternativa molto tempo fa JavaScript Style Sheets (JSSS) era una tecnologia del linguaggio per fogli di stile proposta da Netscape, se qualcuno fosse interessato ti lascerò alcuni link http://en.wikipedia.org/wiki/JavaScript_Style_Sheets

ecco la proposta http://www.w3.org/Submission/1996/1/WD-jsss-960822 penso sia stata una buona idea ma purtroppo css ha vinto, ma forse alcune parti si sono integrate con javascript ??

Inoltre forse invece di usare CSS potresti usare svg per alcuni effetti di testo guarda gli esempi
http://msdn.microsoft.com/en-us/ie/hh410107.aspx
e alcune animazioni
http://svg-wow.org/ text-effects / text-effects.xhtml
alcuni pulsanti effetti https://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/
ecco un esempio più interessante per lo stile del testo che dovresti guardare a questo http: //www.hongkiat .com / blog / scalable-vector-graphics-text /


3

L'unica alternativa è il supporto di formattazione deprecato che l'HTML stesso ha, come il <font>tag. Ma tu non vuoi farlo. 8-)


7
Se usi <font> potresti anche provare un odio leggermente intenso da parte di altri sviluppatori web come me: p (Almeno se devono leggere / correggere il tuo codice ...)
Svish

3

No, CSS è la strada da percorrere ora. Non c'è niente di sbagliato nel formato stesso (personalmente mi piace abbastanza in realtà), ma piuttosto solo nel supporto del browser, specialmente per quanto riguarda IE. Una volta che avremo tutti i principali browser che supportano CSS3 , le cose dovrebbero andare bene, anche se non sono troppo ottimista su quando accadrà.


9
Niente di sbagliato nel formato stesso? Per citare Jeff Atwood: "In breve, CSS viola la schifezza vivente del principio DRY. Ti stai ripetendo costantemente e inevitabilmente. (Mancanza di variabili, quindi dobbiamo ripetere i colori ovunque. Mancanza di nidificazione quindi dobbiamo ripetere enormi blocchi di CSS dappertutto.) Questa è anche la mia esperienza, puoi diventare bravo, ma non ha nulla a che fare con il suo merito come linguaggio
Peter

3

Non ci sono alternative ai CSS in questo momento e questa è una buona cosa. I fornitori di browser, W3C, WHATWG ecc. Hanno già abbastanza tempo per concordare una singola specifica così com'è, puoi immaginare cosa succederebbe se ci fosse più di una specifica?

Ad ogni modo ho scoperto che una volta che impari i CSS, acquisisci conoscenza di quali particolari cose rompono ciò che e o impari a lavorarci o lo eviti.

Spero che sia di aiuto.


12
"Al momento non ci sono alternative ai CSS e questa è una buona cosa."
Gandalf

È una buona cosa all'interno della specifica specifica di Bene che Darko ha delineato.
Dom Vinyard


2

No (principalmente)

Se vuoi creare layout che funzionino nel numero massimo di macchine client, dovrai imparare i CSS.

Se puoi limitare i tuoi utenti a IE8, Chrome, Safari e Firefox, allora probabilmente puoi farla franca con CSS2, altrimenti dovrai imparare tutte le differenze con CSS1, insieme alla miriade di cose rotte, specialmente in IE5 e 6 .

HTML 3.2 include alcuni tag di formattazione (come <font>o <center>) ma non puoi fare molto con loro.

Perché solo per lo più? - Se puoi presumere che gli utenti abbiano Flash o Silverlight e creino applicazioni web per loro. Quindi il tuo layout sarà perfetto, ma avrà bisogno di un plugin lato client (che non tutti hanno) per funzionare. Seguirò questa strada solo se avessi bisogno di un'interfaccia utente davvero ricca.


In realtà, puoi fare molto con i tag di formattazione HTML 3.2 e il layout basato su tabelle. Ad esempio, questo è il mio vecchio sito web (di circa 10 anni): itek.at/alt/ganzneu-eng.html
Erich Kitzmueller,

il tuo sito reale è fatto anche con la tabella di layout. perdi * accessibilità, * capacità di mantenimento, * molti di quei 30% di utenti Internet con handycap, * interpretazione basata su macchine (come google) * ...
vikingosegundo

Niente che puoi fare con 3.2 è accettabile nello sviluppo moderno per motivi di larghezza di banda, accessibilità o manutenzione. Non c'è proprio scopo per il downscaling se non è necessario.
annakata

@ammoQ - sì, puoi, ma ci vuole un po 'ed è una cavalla cambiare. Scorri indietro fino ai primi anni 2000 e il design del sito consisteva nel tagliare un'immagine grande e mettere il puzzle risultante in una tabella. Ne ho fatti molti e non è così buono rispetto alle cose moderne. Puoi creare un sito in questo modo, ma sembrerà che sia stato aggiornato l'ultima volta nel 2002.
Keith,

2

Sono d'accordo che lo stato attuale del supporto CSS è piuttosto orribile.

Penso che l'approccio migliore sia scrivere CSS secondo lo standard e quindi aggiungere correzioni per tutti i bit in cui i vari browser non si conformano correttamente. Spesso vale la pena evitare alcuni bit di CSS (i livelli z, ad esempio, hanno livelli di supporto davvero misti in molti browser).


1

Zoli ha ragione. "xslt è un'alternativa"

XSLT trasforma XML in una pagina web sottoposta a rendering, proprio come CSS trasforma l'HTML in una pagina web sottoposta a rendering. Tieni presente che non puoi combinare XSLT con HTML o CSS con XML.

Ho usato sia CSS + XSLT per creare pagine web sottoposte a rendering.


1

Adobe Postscript è l'alternativa più probabile ai CSS. Il problema è che richiede Acrobat per visualizzarlo sul desktop o sul web. È di gran lunga superiore ai CSS e mantiene l'intento di progettazione e si adatta a tutti i dispositivi, comprese stampanti, plotter, telefoni, tablet e praticamente qualsiasi cosa con un interprete Postscript.

Postscript ha una curva di apprendimento ZERO, a meno che tu non lo stia implementando per un particolare dispositivo. È programmato da milioni di programmatori, artisti grafici, artisti, stampatori professionisti e persino dagli utenti di computer domestici meno qualificati. Tutto quello che devi fare è selezionare stampa o salva dal menu di qualsiasi applicazione. Supporta il collegamento e gli input di campo. È ricercabile? Lo è e i documenti basati su PS vengono spesso visualizzati nelle pagine di ricerca di Google.

Sebbene possa essere visualizzato da un browser Web sotto forma di PDF, non è un linguaggio browser nativo come HTML e CSS. Perché non lo è, se è così facile e potente? Quando il Web era agli inizi, Adobe era troppo miope e avida per aprire il linguaggio. Volevano vendere licenze ai loro motori PS e ai loro prodotti per la creazione di contenuti. Per Adobe, regalare un browser PS era come regalare l'Oca e le uova d'oro.



-6

xslt è un'alternativa

È più potente di css.

È più difficile da imparare e da usare.


4
in che modo XSLT è un'alternativa ai CSS? Fanno cose completamente diverse.
Mr. Shiny and New 安 宇

Penso che potrebbero includere XSL-FO, il che va bene ma AFAIK non funziona in un browser.
Jeremy French,

1
No, non intendo XSL-FO, solo XSLT. In XSLT puoi esprimere trasformazioni, quindi con XSLT puoi esprimere qualsiasi tipo di formattazione che può essere espressa con HTML. OK, questo è meno di quello che i CSS possono fare, ma non ho detto che XSLT è un'alternativa perfetta. Le cose XSLT sono anche in un file separato, come CSS, e da HTML si può fare riferimento al file XSLT. A causa di queste 2 proprietà, si può fare la formattazione per il proprio documento basato su HTML senza molta ridondanza. XSLT funziona in Firefox, IE, non ne ho testati altri.
libeako

4
No, Zoli. Non puoi eseguire la formattazione con XSLT. Puoi interferire con il codice originale, trasformarlo, aggiungerlo a id, rimuoverlo ecc. Ma non puoi
modellarlo
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.