¿Existe una alternativa a CSS?


88

¿Existe un lenguaje de formato de hoja de estilo alternativo a CSS? ¿O es CSS el lenguaje único actual para hacer cosas de tipo de formato de hojas de estilo?

Miré la redacción de CSS en Wikipedia ( http://en.wikipedia.org/wiki/Cascading_Style_Sheets ) y algunos otros comentarios sobre CSS y me desanimé por la falta de soporte completo para CSS en los diferentes motores de diseño, así que Solo tengo curiosidad por saber si hay una alternativa o debo aprender a usar también filtros CSS.

Gracias por cualquier información.


10
CSS si está bien *, es IE el que está roto. (* CWG exceptuado)
annakata

74
Si solo hubiera una alternativa ... Me estremezco al pensar en la cantidad de esfuerzo humano que se ha desperdiciado tratando de hacer cosas en CSS que deberían ser simples pero no lo son ...
PeterAllenWebb

8
lo curioso es que tienes que escribir style = "text / css" en las etiquetas relacionadas con el estilo ... :)

3
Ni siquiera es para programadores. En programación, tiene un orden de ejecución establecido de arriba a abajo en su documento. En CSS ni siquiera tienes eso. Tiene un montón de propiedades a las que se accede ciegamente y se aplican a un documento completamente diferente, una red compleja y estática de cadenas que no puede comenzar a analizar hasta que encuentre la interfaz. No se puede saber de dónde vienen algunos efectos porque las cosas están en cascada ciegamente a lo largo del documento.
GameKyuubi

1
CSS es declarativo porque la web es fluida (¿el usuario está en un monitor gigante, una computadora portátil, un teléfono inteligente o un lector de pantalla?), Por lo que los diseñadores gráficos no pueden usar las técnicas a las que están acostumbrados en, por ejemplo, Photoshop, donde el tamaño del lienzo está bajo su control. Del mismo modo, debido a que los diferentes agentes de usuario se procesan de manera diferente, debe decir "Esto es lo que quiero" en lugar de "Aquí es cómo hacerlo", como lo haría un programador de computadoras. Eso no quiere decir que CSS no necesite muchas mejoras y sea más fácil de usar; solo que debe ser de naturaleza diferente a la que están acostumbrados tanto los diseñadores como los codificadores.
Canuck

Respuestas:


64

CSS es la única opción real.

La compatibilidad del navegador con CSS no debería ser una preocupación importante (en la mayoría de los casos) una vez que aprenda los entresijos de CSS. La clave para entender CSS es que su propósito es definir el estilo de un documento HTML y debe estar separado del contenido.

Necesitará practicar para aprender cómo hacer que las cosas se degraden con elegancia en navegadores que no admiten funciones. La idea básica aquí es que debe hacer que el mínimo común denominador (Internet Explorer normalmente) funcione "lo suficientemente bien" como para que no le quite la experiencia del usuario y proporcione las sutilezas a los usuarios con mejores navegadores. Además, no desarrolle primero para Internet Explorer. Déjelo para el final, luego corrija sus errores. Hacer las cosas al revés (IE primero) es mucho más difícil.

También tiene la opción de usar JavaScript para establecer estilos, pero no se recomienda porque debe evitar aplicar estilos dentro de JavaScript, ya que JavaScript está diseñado para la lógica, no para los estilos.

Hay 3 componentes (dependiendo de cómo se mire) en una página web:

  • HTML - para contenido
  • CSS : para diseñar tu contenido
  • JavaScript : para aplicar lógica adicional o dinámica a su contenido

19
La línea clave es la segunda oración: "La compatibilidad del navegador con CSS no debería ser una preocupación importante (en la mayoría de los casos) una vez que aprenda los entresijos de CSS". Las personas que más se quejan de que CSS no funciona son las que menos lo saben.
Rob Allen

1
+1: ... para una excelente respuesta. La sugerencia de codificar primero los estándares y luego corregir los errores en el motor de renderizado de IE es definitivamente la manera de hacerlo.
Jon Cage

Cuando conoces bien CSS, IE7 se comporta bastante bien. @Rob: escucha, escucha +1.
Ryan Florence

1
hacer una aplicación con CSS es una verdadera tortura para un desarrollador de aplicaciones. sin embargo, excepto Cappuccino.org, ha habido muy pocos intentos de resolver este problema tan obvio. hay rumores de que xcode producirá html5 pronto, si eso sucede, pondrá fin a este caos, no porque xcode sea el mejor, guiará a otros a implementar SDK para la web, y los navegadores vendrán con componentes de interfaz de usuario ( todavía usarán css y html para mostrarlo, pero a quién le importa, no los veremos / usaremos / sabremos / aprenderemos)
Devrim

3
@RobAllen Digo lo mismo sobre Malbolge, mi lenguaje de programación favorito. Las personas que piensan que es imposible simplemente no lo conocen lo suficiente como para darse cuenta de lo grandioso que es.
AR

68

Todos ustedes están tratando de responder la pregunta desde la perspectiva de un programador. Creo que el cartel original buscaba una alternativa más amigable con los gráficos, una que ofreciera un concepto diferente.

Incluso si CSS3 se adopta en varios navegadores, creo que la forma CSS de distribuir las cosas (cuadro en línea, flotantes, márgenes, etc.) es terrible. Soy programador, pero mi padre es diseñador gráfico, y estoy bastante seguro de que el software de diseño que usaron durante 20 años era en algunos aspectos más fácil y más avanzado que CSS.


9
¡Exactamente! CSS y el flujo de trabajo cognitivo del diseño gráfico no están en el mismo nivel de abstracción.
Alex

5
En mi humilde opinión, esta respuesta está tan
subestimada

13
"mi padre es editor y diseñador gráfico, y me he bañado en diseño gráfico desde mi más pequeña edad, y me atrevo a decir que el software de publicación que usaban hace 20 años era más avanzado y fácil de usar que HTML / CSS en la actualidad". ... La diferencia es que su padre no estaba diseñando para diferentes tamaños de pantalla, lectores de pantalla, diferentes versiones de navegador (con diferentes capacidades), etc. Diseñar para impresión es mucho, mucho más simple que diseñar para visualización en pantalla, y por lo tanto CSS es más complejo que los lenguajes diseñados para diseñar medios impresos.
J. Taylor

1
Recomendé Postscript como idioma y PDF como vehículo de entrega. Me golpearon y votaron en contra de una manera viscosa. A los droides de SO no les gustan las opiniones.
ATL_DEV

1
@J Taylor, lo perderás. Diseñar utilizando cualquier medio no es fácil. Es una habilidad, un arte y una ciencia tanto como escribir CSS y HTML. Respete las artes. Postscript fue diseñado para manejar diferentes tamaños de medios y ha existido durante décadas. El objetivo de HTML y CSS es hacer que el navegador web represente algo que Postscript hace de forma predeterminada. ¡HTML y CSS son horribles!
ATL_DEV

43

, se llama MENOS y realmente soluciona la mayoría de los problemas de legibilidad del código CSS.

Se puede compilar tanto en el servidor o en la marcha del lado del cliente con less.js .

Para la producción, recomiendo configurar un script de compilación que lo compile (en NodeJS esto es pan comido con Grunt y grunt-contrib-less ).


Editar: También hay otras opciones que vale la pena mencionar, incluso si estoy usando y recomendando MENOS.

SASS : A la gente de Ruby le encanta este. No es un superconjunto de CSS como LESS, sino que utiliza su propia sintaxis. Para hacer frente a esto, desarrollaron SCSS, que es un superconjunto de CSS y es similar a LESS.

Stylus : como LESS, está codificado en javascript, pero esto se usa comúnmente en Node.js. No puedo responder por ello, ya que no lo probé todavía, pero es muy maduro, así que si tiene una característica que desea, definitivamente hágalo.

Turbine : Este fue codificado en PHP. No mucha tracción.

Cambiar CSS : tal vez los piratas informáticos de Python quieran investigar esto. Incluso menos tracción.

Si te sientes aún más alternativo, también hay CSS Cacheer , CSScaffold , DtCSS , CSSPP e incluso algo de porneL .


Otras cosas que quizás quieras consultar:

Brújula : un marco de creación CSS completo para los chicos de Ruby.

WinLESS : un compilador LESS de arrastrar y soltar para Windows, es genial y realmente deberías comprobarlo.

LESS Elements , Preboot , LESSHat y even.less : Bibliotecas de mixins y constantes para LESS.

Bootstrap : un marco desarrollado por Twitter. También relacionado: HTML5 Boilerplate .

Normalize.css : una alternativa a los restablecimientos de CSS . Hay muchos reinicios, sin embargo, como desarrollador de uno, tengo que decir: la mayoría son una mierda. Si no vas a hacer el tuyo propio, usa este.


Actualización : desde 1.4 , LESS @extendtambién. ¡Asegúrese de usar 1.4+ si es posible! Esto completa las razones para elegir LESS sobre SASS, creo.


26
desafortunadamente, esto no parece ser una alternativa al modelo en sí.
n611x007

1
@naxa y ¿por qué querrías eso? El modelo es genial (hojas de estilo), la implementación es terrible (CSS). Estas herramientas abordan solo la implementación, por lo que son tan populares.
Camilo Martin

3
Porque la competición ayuda al progreso. ¿A qué te refieres con "hojas de estilo"? Lo asocio con un archivo / sección en cascada y distinto del texto. Pero hay más, el modelo de caja, que utiliza etiquetas y contenedores fusionados en el texto (con html). ¿Hay implementación [en] dependencia? - p.ej. ¿Se pueden aplicar las hojas de estilo a cualquier cosa que no sea html / xml? (¿Qué pasa si escribió una hoja de estilo y no desea aplicarla a un texto no basado en gt / lt o en un formato binario? ¿Reutilizó alguna implementación de hoja de estilo o por su cuenta en la naturaleza?)
n611x007

@naxa lo que quise decir es que el concepto de tener estilo separado del contenido es un gran modelo, que es lo que yo llamo "hojas de estilo". Y por implementación me refiero a la sintaxis CSS, pero estoy de acuerdo en que tener LESS en lugar de CSS es como usar CoffeeScript en lugar de Javascript. Y bueno, hay formatos de marcado binarios, así que no veo por qué no podría tener hojas de estilo binarias, pero si lo piensa, probablemente no se encontrarían con ese nombre, porque las hojas de estilo resuelven un problema humano (estilos de escritura para muchos documentos), no es un problema de la máquina (o todavía estaríamos usando <FONT>etiquetas).
Camilo Martin

4
He votado en contra porque estos son preprocesadores, no alternativas. Se colocan sobre CSS y generan CSS al final. Así que es solo un nivel de abstracción más alto, pero no una alternativa.
ProblemsOfSumit

17

Si.

Como todos los demás dijeron, CSS es su única opción real, pero hay otro lenguaje para "elementos de tipo de formato de hoja de estilo" en la web, llamado Lenguaje de hoja de estilo extensible (XSL), particularmente el subconjunto de la especificación que se conoció como XSL-FO (formateo de objetos) .

En un momento dado, dependiendo de a quién le preguntaras, se pretendía competir o colaborar con CSS .


1
El W3C tiene un buen resumen de la relación entre XSL y CSS: w3.org/Style/CSS-vs-XSL
Patrick McElhaney


7

CSS extendido no tiene soporte completo en todos los navegadores ... ¿cómo debería una alternativa (desconocida) alcanzar este objetivo?


3
Al tener un modelo de diseño que es predecible, intuitivo y soluciona problemas en nuevas versiones en lugar de dejar los errores.
AR

7

Bueno, CSS 2.1 es bastante compatible con casi todos los navegadores. (excepto IE6) Es fácil escribir CSS elegantemente degradado una vez que conoce el subconjunto seguro. (Para que incluso los navegadores no compatibles no estropeen totalmente la página)

Consulte http://www.quirksmode.org para obtener sugerencias de compatibilidad con el navegador CSS.


4
+1 para quirksmode: todo usuario que comience con CSS debe saberlo. Yo agregaría que IE7 también es bastante malo con CSS2 y, desafortunadamente, la mayoría de la web (y casi todas las redes corporativas) son solo IEs 6 y 7, por lo que debe tener cuidado con CSS2.
Keith


6

se desanimó por la falta de soporte completo para CSS en los diferentes motores de diseño

Creo que jQuery tiene algunas formas de hacer que CSS sea más compatible entre los navegadores, es decir, si especifica algunos atributos usando jQuery, intentará asegurarse de usar una solución alternativa para los navegadores que no admiten ciertas características.

También hay un proyecto llamado CleverCSS , es posible que desee comprobarlo. Sin embargo, no es una alternativa, solo una forma ligeramente diferente de definirlo.


Por desgracia, el enlace está muerto .. :-(
agosto

4

Miré la redacción de CSS en Wikipedia ( http://en.wikipedia.org/wiki/Cascading_Style_Sheets ) y algunos otros comentarios sobre CSS y me desanimé por la falta de soporte completo para CSS en los diferentes motores de diseño, así que Solo tengo curiosidad por saber si hay una alternativa o debo aprender a usar también filtros CSS.

CSS es el estándar. No hay alternativa.

Todos los navegadores admiten las funciones básicas de CSS. Cada nueva versión de cada una de las (¿cuatro?) Líneas principales del navegador viene con un mayor soporte para el estándar, pero los sitios web que usan estas características no estarán disponibles para cualquier usuario en una versión anterior. Hay dos respuestas a esto:

  1. "Degradación elegante" (o su gemelo, "Mejora progresiva" - google it), en la que la página aprovecha las funciones avanzadas si están disponibles, mientras sigue funcionando si no lo están.

  2. ¿Quiénes son tu audiencia? Si tiene la suerte de saber que el 99,8% de los visitantes de su sitio web utilizarán al menos IE7, no debe preocuparse por las funciones CSS que no funcionan en IE6. Sin embargo, esto dependerá de su propio negocio, así que primero verifique los hechos.

Lo peor que puede hacer es codificar las peculiaridades de un solo navegador específico, porque eso conduce a una página que está rota no solo en otros navegadores, sino incluso en versiones posteriores del mismo navegador.


4

Una alternativa hace mucho tiempo, JavaScript Style Sheets (JSSS) era una tecnología de lenguaje de hojas de estilo propuesta por Netscape, si alguien está interesado, le dejaré algunos enlaces http://en.wikipedia.org/wiki/JavaScript_Style_Sheets

aquí está la propuesta http://www.w3.org/Submission/1996/1/WD-jsss-960822 Creo que esta fue una buena idea, pero lamentablemente css ganó, pero tal vez algunas partes se integraron con javascript.

También tal vez en lugar de usar css, podría usar svg para algunos efectos de texto, mire los ejemplos
http://msdn.microsoft.com/en-us/ie/hh410107.aspx
y algunas animaciones
http://svg-wow.org/ efectos-de-texto / efectos-de-texto.xhtml efectos de
algunos botones https://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/
aquí hay un ejemplo más interesante de estilo de texto. Debería ver este http: //www.hongkiat .com / blog / texto-gráficos-vectoriales-escalables /


3

La única alternativa es el soporte de formato obsoleto que tiene el propio HTML, como la <font>etiqueta. Pero no quieres hacer eso. 8-)


7
Si usa <font>, también puede experimentar un odio levemente intenso por parte de otros desarrolladores web como yo: p (al menos si tienen que leer / corregir su código ...)
Svish

3

No, CSS es el camino a seguir ahora. No hay nada de malo en el formato en sí (a mí personalmente me gusta bastante), sino solo en el soporte del navegador, especialmente en lo que respecta a IE. Una vez que tengamos todos los principales navegadores compatibles con CSS3 , las cosas deberían ir bien, aunque no soy demasiado optimista sobre cuándo sucederá.


9
¿No hay nada de malo en el formato en sí? Para citar a Jeff Atwood: "En resumen, CSS viola la mierda viviente del principio DRY. Te estás repitiendo constante e inevitablemente. (Falta de variables, por lo que tenemos que repetir los colores por todas partes. Falta de anidación, por lo que tenemos que repetir bloques enormes de CSS por todas partes). Esa también es mi experiencia, puedes llegar a ser bueno en eso, pero no tiene nada que ver con su mérito como lenguaje
Peter

3

No hay alternativa a CSS en este momento y esto es algo bueno. Los proveedores de navegadores, W3C, WHATWG, etc., tienen bastante dificultad para acordar una sola especificación tal como está, ¿se imagina lo que sucedería si hubiera más de una especificación?

De todos modos, descubrí que una vez que aprendes CSS, obtienes conocimiento de qué cosas en particular rompen qué y aprendes a trabajar con ellas o las evitas.

Espero que esto ayude.


12
"No hay alternativa a CSS en este momento y esto es algo bueno", no estoy de acuerdo.
Gandalf

Es algo bueno dentro de la estrecha especificación de Bueno que describió Darko.
Dom Vinyard


2

No (mayormente)

Si desea crear diseños que funcionen en el número máximo de máquinas cliente, tendrá que aprender CSS.

Si puede limitar a sus usuarios a IE8, Chrome, Safari y Firefox, entonces probablemente pueda salirse con la suya con CSS2, de lo contrario tendrá que aprender todas las diferencias con CSS1, junto con la miríada de cosas rotas, especialmente en IE5 y 6 .

HTML 3.2 incluye algunas etiquetas de formato (como <font>o <center>) pero no puede hacer mucho con ellas.

¿Por qué solo en su mayoría? - Si puede asumir que los usuarios tienen Flash o Silverlight y crear aplicaciones web para ellos. Entonces su diseño será perfecto, pero necesitará un complemento del lado del cliente (que no todos tienen) para funcionar. Solo seguiría ese camino si necesita una interfaz de usuario de cliente realmente rica.


En realidad, puede hacer mucho con las etiquetas de formato HTML 3.2 y el diseño basado en tablas. Por ejemplo, este es mi antiguo sitio web (de unos 10 años): itek.at/alt/ganzneu-eng.html
Erich Kitzmueller

su sitio real también está hecho con una tabla de diseño. pierde * accesibilidad, * capacidad para mantener, * muchos de esos 30% de usuarios de Internet con handycaps, * interpretación basada en máquinas (como google) * ...
vikingosegundo

Nada de lo que pueda hacer con 3.2 es aceptable en el desarrollo moderno por motivos de ancho de banda, accesibilidad o mantenimiento. Simplemente no tiene sentido reducir la escala si no es necesario.
Annakata

@ammoQ: sí, puedes, pero lleva un tiempo y es una yegua cambiar. Regrese a principios de la década de 2000 y el diseño del sitio consistió en cortar una imagen grande y colocar el rompecabezas resultante en una mesa. Hice mucho y no es tan bueno en comparación con las cosas modernas. Puede hacer un sitio de esa manera, pero parecerá que se actualizó por última vez en 2002.
Keith

2

Estoy de acuerdo en que el estado actual de la compatibilidad con CSS es bastante horrible.

Creo que el mejor enfoque es escribir CSS de acuerdo con el estándar y luego agregar correcciones para todos los bits en los que los distintos navegadores no cumplen correctamente. A menudo vale la pena evitar algunos bits de CSS si lo piensa (los niveles z, por ejemplo, tienen niveles de soporte realmente mixtos en muchos navegadores).


1

Zoli tiene razón. "xslt es una alternativa"

XSLT convierte XML en una página web renderizada, al igual que CSS convierte HTML en una página web renderizada. Solo tenga en cuenta que no puede mezclar XSLT con HTML o CSS con XML.

He usado CSS + XSLT para crear páginas web renderizadas.



0

Adobe Postscript es la alternativa más probable a CSS. El problema es que requiere que Acrobat lo vea en el escritorio o en la web. Es muy superior a CSS y mantiene la intención del diseño y se escala en todos los dispositivos, incluidas impresoras, trazadores, teléfonos, tabletas y casi cualquier cosa con un intérprete de Postscript.

Postscript tiene una curva de aprendizaje CERO, a menos que lo esté implementando para un dispositivo en particular. Está programado por millones de programadores, artistas gráficos, artistas, impresores profesionales e incluso el usuario de computadoras hogareñas menos capacitado. Todo lo que necesita hacer es seleccionar imprimir o guardar desde el menú de cualquier aplicación. Admite enlaces y entradas de campo. ¿Se puede buscar? Es y los documentos basados ​​en PS aparecen con frecuencia en las páginas de búsqueda de Google.

Aunque se puede ver desde un navegador web en forma de PDF, no es un lenguaje de navegador nativo como HTML y CSS. ¿Por qué no lo es, si es tan fácil y poderoso? Cuando la web estaba comenzando, Adobe era demasiado miope y codicioso para abrir el lenguaje. Querían vender licencias para sus motores de PS y sus productos de creación de contenido. Para Adobe, regalar un navegador PS era como regalar la gallina de los huevos de oro.


-6

xslt es una alternativa

Es más poderoso que css.

Es más difícil de aprender y usar.


4
¿Cómo es XSLT una alternativa a CSS? Hacen cosas completamente diferentes.
Mr. Shiny and New 安 宇

Creo que pueden significar XSL-FO, lo cual está bien, pero AFAIK no funciona en un navegador.
Jeremy French

1
No, no me refiero a XSL-FO, solo XSLT. En XSLT puedes expresar transformaciones, por lo tanto con XSLT puedes expresar cualquier tipo de formato que se pueda expresar con HTML. Bien, eso es menos de lo que CSS puede hacer, pero no he dicho que XSLT es una alternativa perfecta. Las cosas XSLT también están en un archivo separado, como CSS, y desde HTML se puede hacer referencia al archivo XSLT. Debido a estas 2 propiedades, uno puede dar formato a su documento basado en HTML sin mucha redundancia. XSLT funciona en Firefox, IE, no he probado otros.
libeako

4
No, Zoli. No puede formatear con XSLT. Puedes interferir con el código original, transformarlo, agregar a la identificación, eliminarlo, etc. pero no puedes darle estilo ...
Gabriele Petrioli
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.