Prescinde de los prefijos privativos de Css con SCSS y uso de Shapes Css 14.9.14
Artículo original de Eder Iraizoz para #ksesocss. Uso de Scss para evitar el uso de los prefijos privativos de Css y una demo usando Shapes Css.
Prescinde de los prefijos privativos de Css con SCSS y uso de Shapes Css
Artículo original de Eder-Iraizoz (aka Lecriminale) para Ksesocss
Olvídate de los prefixes con SCSS
Todos odiamos andar escribiendo los Vendor-Prefixes, Browser-Prefixes o en español prefijos privativos de Css Y aparte de la pereza que da escribirlos, terminan ensuciando la hoja de estilos y haciéndola crecer considerablemente.
Pues bien, existen plugins SCSS (que no he probado) que añaden los prefijos a las propiedades que los necesitan, pero según tengo entendido pueden dar problemas como entre otras cosas, añadir prefijos donde YA NO se necesitan, sumando un peso innecesario a tu hoja de estilos.
Casi a la par de haber descubierto los preprocesadores me crucé con un artículo de Stefan Wienert que me ha ahorrado unos minutos diarios desde entonces.
La cuestión es que, casi todos conocemos al menos por encima las ventajas de los preprocesadores, pero lo que pocos saben (incluido yo hace unos meses) es que aparte de la posibilidad de atribuir argumentos variables a las propiedades, los mismos atributos pueden ser variables por sí mismos:
#{$attr}: #{$arg}; //representa un atributo y su argumento, ambos por definir
//"$attr" y "$arg" como el mismo símbolo de dolar indica que son variables de SCSS, pueden nombrarse a gusto de cada uno
Viendo esta ventaja lo primero que se me pasó por la cabeza es HACKEAR LA WEB!!!
Sí, cuando a un webcoder que no ha tocado más que HTML y CSS le pones la posibilidad de manejar una variable se cree un hacker. (Espero no haber sido el único). En fin.
Una vez dejado en el armario nuestro disfraz de superhéroe volvemos al papel de Clark Kent.
Con el dedo índice empujamos nuestras gafas por el entrecejo y a codear:
@mixin prefijos($atributo, $argumento) {
-webkit-#{$atributo}: #{$argumento};
-moz-#{$atributo}: #{$argumento};
-ms-#{$atributo}: #{$argumento};
-o-#{$atributo}: #{$argumento};
#{$atributo}: #{$argumento};
}
.columna {
@include prefijos(box-sizing, border-box)
}
No hace falta ni que lo explique. Si has leído hasta aquí supongo que es porque tienes cierto nivel en el uso de preprocesadores. Si no es así, este artículo son mil motivos para probarlos.
Lo que sí puntualizaré es que el atributo sin prefijo va abajo del todo porque teniendo en cuenta que el .css se renderiza de arriba a abajo, pretendemos darle a entender al navegador que sólo debe utilizar su correspondiente prefijo si es que esa versión del navegador la necesita.
See the Pen SCSS absent prefixes by EderIraizoz (@EderIraizoz) on CodePen.
Moldear imágenes con CSS Shapes
CSS Shapes es un (relativamente) nuevo módulo CSS que te permiten trazar siluetas con dos utilidades básicas: dar forma a texto y/o a imágenes.
También tienen dos métodos de uso, pero me voy a centrar en el método sencillo y no por eso menos eficiente. Hasta donde yo entiendo el resultado es exactamente el mismo.
Si os ha picado la curiosidad por el método que NO trataremos sois libres de investigarlo. Pero aquí un pequeño SPOILER:
shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
Vale, ahora que se fueron los amantes de los numeritos vamos al grano.
Vamos a darle forma a una imagen de usuario porque estamos hartos de verlas cuadradas, redondas, o cuadradas con bordes redondeados.
[alt='img-perfil']{/*uso un selector por atributo*/
width:120px; height:120px;/*tamaño fijo que me interesa para la imagen*/
mask-image: url(imagen.png);/*silueta que da forma a la imagen*/
}
Por supuesto lo debéis poner con sus respectivos prefijos ya que aún está sujeto a cambios.
Podéis ver cómo esquivarlos en la primera parte del artículo.Ahora vamos a cualquier software de dibujo y trazamos nuestra silueta.
Podemos guardar nuestra imagen en formato .png con canal alfa (fondo transparente) o .svg [Imágenes vectoriales].
La parte transparente tapa los extremos de la imagen que por defecto tiene forma rectangular, siendo la zona negra la imagen del usuario en forma de estrella en este caso.
Una ejemplo la imagen adjunta.
Así de fácil se les arranca la monotonía a las imágenes de tu web. Ésto tiene mil métodos de empleo, teniendo el conocimiento falta el toque de imaginación:
See the Pen CSS Shape - Shaping an image by EderIraizoz (@EderIraizoz) on CodePen.
El autor del post: Eder Iraizoz
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
para los sufijos ¿no es mas sencillo con compass y utilizar los @include???
ResponderEliminarSi te refieres a los prefijos, como dije en e artículo no he probado otra manera que no sea ésta (a pesar de que utilizo compass). No obstante, según la documentación que leí en su día, aún así habría que crear un mixin con los includes a cada prefijo y mantener el atributo variable. Tampoco me esforcé en buscar otra forma de hacerlo ya que ésta me resulta algo muy práctico.
EliminarAunque si sigues pensando que es complicarse, me gustaría que me detallaras ese método ^^
Un saludo.
Bien lo que yo hago es ésto:
EliminarObvio instalo compass y llamo a la librería: @import 'compass/css3'; y cuando necesito aplicarle sufijos solamente hago algo como ésto: #nombre-del-id-o-clase { @include box-shadow(0 0 30px #000); y listo el aplica los sufijos que se requiera
Todo eso tan bonito pero yo edito CSS con firefox o chrome, con firefox edito y luego al html le aplico el Prefix-free. Pero con chrome no se puede (a menos de exista un app prefix para editarlo mientras esta desabilitado el Prefix-free). No se como hacen para diseñar en vivo usando otros programas... gracias
ResponderEliminar