Recientemente, vimos cómo usar LESS.js para mejorar su CSS y ahorrarle toneladas de tiempo de desarrollo. Hoy veremos eCSStender, otra herramienta de JavaScript que le permite implementar propiedades CSS3 complicadas con muy poco código.
eCSStender puede ser un poco confuso resolverlo por su cuenta, pero una vez que lo descubra, literalmente le llevará menos de un minuto instalarlo y usarlo. A continuación, lo guiaré a través de la construcción de un ejemplo básico que utiliza varias extensiones de eCSStender.
¿Qué es eCSStender?
El flujo de trabajo básico de eCSStender es el siguiente: busque y descargue una extensión, colóquela en el directorio de su sitio web, haga un enlace a su HTML, implemente el CSS.
Los principales beneficios de eCSStender se analizaron en detalle en el reciente artículo de Aaron Gustafson, Stop Forking con CSS3 (Aaron Gustafson es el creador de eCSStender). Uno de los problemas más grandes con CSS3 es, por supuesto, el extenso código necesario para implementarlo en un navegador cruzado.
Por ejemplo, si tenemos un cuadro simple que queremos darle esquinas redondeadas y una sombra paralela, es necesario el siguiente código:
Básicamente, solo estamos agregando dos estilos, ¡pero se necesitan seis líneas de código! eCSStender reduce el trabajo necesario aquí al permitirle escribir una sola línea de código que ejecuta automáticamente todas las versiones de estilo recomendadas.
Para ver cómo funciona esto, vamos a construir un ejemplo básico.
La caja
Para mantener las cosas ridículamente simples, solo construyamos una página web con un cuadrado y algo de texto.
El marcado aquí es super básico. Aquí está el HTML:
Y aquí está el CSS en este punto:
Descargando eCSStender
Para hacer que nuestra caja aburrida sea más emocionante, primero debemos descargar eCSStender. Lo que obtienes en esta descarga es un gran lío de archivos que te dejarán confundido e intimidado.
Afortunadamente, solo necesita preocuparse por un solo archivo aquí. Sólo tienes que tomar? ECSStender.js? de la? src? Carpeta y tirar el resto. Los usuarios avanzados deben sentirse libres de revisar todos los ejemplos y la documentación, pero para los fines de este tutorial, el archivo principal de JavaScript funcionará por sí solo.
Descargando Extensiones
eCSStender no hace mucho de inmediato. En su lugar, crea y / o descarga extensiones gratuitas para complementar sus necesidades. Dirígete a la página de Extensiones de eCSStender para ver qué hay disponible.
Como puede ver, eCSStender aún se encuentra en las primeras etapas de desarrollo, por lo que solo hay unas cuantas extensiones en este momento, algunas de las cuales aún están en construcción.
Cuando haga clic en uno de los enlaces que se muestran arriba, lo llevarán a una página donde puede descargar la extensión, ver una demostración y aprender sobre su implementación.
Nuestra primera prueba: esquinas redondeadas
Para ver cómo funciona todo esto, descargue la extensión de fondos y bordes. Una vez más, obtendrás una descarga bastante fuerte solo para capturar un solo archivo. Agarra el archivo llamado? ECSStender.css3-wallpapers-and-borders.js? y tíralo en tu directorio web.
Vinculando los archivos
Ahora que tenemos eCSStender y una extensión instalada, es hora de cargarlos en su documento HTML. Esto se hace exactamente como cualquier otro archivo .js, solo agregue un enlace en la parte principal de su documento.
Como puede ver, decidí que el nombre de archivo para los fondos y la extensión de los bordes era demasiado largo y lo renombré? ECSStenderBB.js? para mantener las cosas simples Siéntase libre de ignorar este paso si lo desea, solo asegúrese de que sus nombres de archivos coincidan con los que se muestran en su HTML.
El CSS
Como puedes ver, realmente no ha habido mucho trabajo hasta ahora. La mayoría del contenido anterior es explicación, antecedentes, etc. Todo lo que hemos hecho hasta este punto es descargar un archivo y vincularlo en nuestro HTML, muy parecido a lo que haría con jQuery.
Cuando implementas una extensión determinada en el CSS de tu sitio, asegúrate de consultar la página de descarga para conocer la sintaxis correcta. En nuestro caso, el siguiente código hace el trabajo:
Eso es todo al respecto. eCSStender hará su magia y se asegurará de que este código se transforme adecuadamente para que funcione en la mayoría de los navegadores modernos.
Ahora, te darás cuenta de que esto nos dio una forma bastante funky. Eso es porque cada esquina está configurada a un radio diferente. Sin embargo, me gusta la idea básica aquí, así que voy a restablecerla para que una esquina sea bastante aguda y las otras estén uniformemente redondeadas en mayor grado.
Añadiendo más
Solo para asegurarnos de obtener la esencia, agreguemos dos propiedades más. Primero, descargue tanto las extensiones de transición como las de transformación.
Agarre los archivos .js necesarios como en el ejemplo anterior y tírelos en la carpeta de su sitio. Desde la página de descarga de cada extensión, podemos ver que la sintaxis es la siguiente:
Como puede ver, la sintaxis de transición es bastante básica: seleccione qué transición, establezca una duración y establezca una facilidad. Con la propiedad de transformación, primero debe establecer un origen, luego enumerar la transformación que desea realizar junto con un indicador numérico. En este caso rotamos el objeto 15 grados.
Entonces, para aplicar esto a nuestro ejemplo, hagamos un efecto de desplazamiento divertido.
Así que ahora, cuando pase el cursor sobre el cuadro, girará, cambiará de color y cambiará el tamaño de la fuente, todo con una buena transición.
Cada una de estas propiedades CSS3 normalmente tomaría alrededor de cuatro líneas de código. Como puede ver, definitivamente nos hemos ahorrado un poco de codificación.
eCSStender vs. LESS: ¿Cuál es el veredicto?
En general, eCSSstender fue definitivamente divertido para jugar. Sin embargo, debido a que últimamente he estado jugando con muchas de estas herramientas CSS, simplemente no puedo evitar compararlas con MENOS.
Echemos un vistazo a algunas de las áreas donde sobresale cada sistema. Fuera del cuadro, LESS se siente más poderoso porque convierte CSS en un lenguaje de programación real con variables, operaciones, etc. Esto agrega una cierta flexibilidad a la codificación y la sintaxis que no obtiene con eCSStender. LESS tampoco requiere que los usuarios busquen y descarguen múltiples extensiones y se vinculen a una gran cantidad de documentos JS. Finalmente, LESS puede ser usado inmediatamente por cualquier persona sin preocuparse por la compatibilidad, porque lo que finalmente se carga es un CSS antiguo.
eCSStender facilita a los desarrolladores la creación de complementos personalizados, por lo que a largo plazo, esta podría ser la solución más potente y robusta (siempre y cuando los desarrolladores se sumen). eCSStender también es bueno porque puede omitir el paso de compilación inherente en el método LESS (los archivos .LESS se compilan en archivos .CSS). También hay algunas otras razones técnicas que le podrían gustar que eCSStender se encuentre mejor en la sección de Preguntas frecuentes. Por ejemplo,? Un preprocesador [como LESS] no puede aprovechar ese matiz para implementar animaciones basadas en JavaScript como una alternativa a las basadas en CSS si no son compatibles debido a los preprocesadores (como están construidos actualmente) tomar una talla única para todos? enfoque para el manejo de CSS: todos tienen la misma cosa.
Sin embargo, a pesar de todo esto, incluso el sitio web de eCSStender admite que simplemente no es tan práctico de usar en muchas circunstancias. Por mi parte, no puedo verme nunca realmente usando eCSStender por más que un poco de diversión y experimentación (a menos que se realicen grandes cambios).
¿Por alguna razón, eCSStender solo tomó mucho más? que MENOS para que todo funcione correctamente. Por ejemplo, tengo eCSStender funcionando en Safari, pero luego no funcionaría en Chrome (extraño ya que ambos son Webkit) y con frecuencia bloqueaba Firefox.
En última instancia, las herramientas como estas están destinadas a mejorar y simplificar su flujo de trabajo. Déles una oportunidad para ver si esa intención se cumple. Si SASS, LESS, eCSStender, o cualquier otra herramienta similar resulta en un tiempo de adición al proceso de codificación, entonces tírelos y vuelva a los buenos viejos HTML y CSS de la forma en que debían ser.
Unirse a la conversación
Deja un comentario a continuación y dinos qué herramientas de extensión o modificación de CSS has probado. Cuéntanos lo que piensas de LESS y eCSStender. ¿Te gusta uno y odias al otro, los amas a ambos o no puedes ver una razón para que ninguno de los dos exista?
Como desarrolladores en el mundo real, en última instancia, usted decide qué se adopta y qué no, ¡y queremos escuchar sus opiniones!