Contenido

CSS Sprites para mejorar las fechas de tus posts

4 feb

+ 9

Hace ya tiempo, vimos como introducir un calendar con las fechas en tus posts. Un sistema que permite darle un aspecto diferente a tu wordpress. En WpBeginner dán un paso más y usando la CSS Sprites genera un elegante sistema que se basa en desplazarse por encima de una imágen para mostrar la fecha.

dates-css-sprites-large
(Ver Imagen)

Como vemos en la imágen, tenemos las fechas desde 2009 a 2014 y con el siguiente código CSS podremos mostrar el año que deseemos.

/*Date Sprite */
.postdate {
position: relative;
width: 66px;
height: 60px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(images/date_img.png);
background-repeat: no-repeat;
}
.month { top: 10px; left: 0; width: 33px; height: 30px;}
.day { top: 30px; left: 0; width: 33px; height: 30px;}
.year { bottom: 0; right: 13px; width: 20px; height: 60px;}

.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -62px;}
.m-04 { background-position: 0 -94px;}
.m-05 { background-position: 0 -125px;}
.m-06 { background-position: 0 -155px;}
.m-07 { background-position: 0 -185px;}
.m-08 { background-position: 0 -217px;}
.m-09 { background-position: 0 -248px;}
.m-10 { background-position: 0 -279px;}
.m-11 { background-position: 0 -310px;}
.m-12 { background-position: 0 -341px;}

.d-01 { background-position: -51px 0;}
.d-02 { background-position: -51px -27px;}
.d-03 { background-position: -51px -57px;}
.d-04 { background-position: -51px -91px;}
.d-05 { background-position: -51px -122px;}
.d-06 { background-position: -51px -151px;}
.d-07 { background-position: -51px -185px;}
.d-08 { background-position: -51px -214px;}
.d-09 { background-position: -51px -249px;}
.d-10 { background-position: -51px -275px;}
.d-11 { background-position: -51px -309px;}
.d-12 { background-position: -51px -338px;}
.d-13 { background-position: -51px -373px;}
.d-14 { background-position: -51px -404px;}
.d-15 { background-position: -51px -436px;}
.d-16 { background-position: -51px -462px;}
.d-17 { background-position: -100px -0px;}
.d-18 { background-position: -100px -27px;}
.d-19 { background-position: -100px -57px;}
.d-20 { background-position: -100px -91px;}
.d-21 { background-position: -100px -122px;}
.d-22 { background-position: -100px -151px;}
.d-23 { background-position: -100px -185px;}
.d-24 { background-position: -100px -214px;}
.d-25 { background-position: -100px -249px;}
.d-26 { background-position: -100px -275px;}
.d-27 { background-position: -100px -309px;}
.d-28 { background-position: -100px -338px;}
.d-29 { background-position: -100px -373px;}
.d-30 { background-position: -100px -404px;}
.d-31 { background-position: -100px -436;}

.y-2009 { background-position: -150px 0;}
.y-2010 { background-position: -150px -60px;}
.y-2011 { background-position: -150px -120px;}
.y-2012 { background-position: -150px -180;}
.y-2013 { background-position: -150px -240px;}
.y-2014 { background-position: -150px -300px;}

El código HTML encargado de mostrar las imágenes se basa en el uso de clases que indicarán que porción de imágen hay que mostrar.

<div class="postdate">
<div class="month m-<?php the_time("m") ?>"><?php the_time("M") ?></div>
<div class="day d-<?php the_time("d") ?>"><?php the_time("d") ?></div>
<div class="year y-<?php the_time("Y") ?>"><?php the_time("Y") ?></div>
</div>

El resultado es que mediante la carga de una única imágen disponemos de todas las fechas posibles entre estos 5 años y solo cambiando las clases de los hijos del elemento .postdate podremos mostrar una fecha u otra.

CSS3 @font-face, una visión general

28 ene

+ 13

Ya hemos hablado otras veces de @font-face, la capacidad de definir nuestras propias fuentes mediante CSS y que los usuarios las descarguen y las visualizen.

Soporte

Aunque suene raro, Internet Explorer lo implementa desde la versión 4.0 (con sutiles diferencias), y los estándares no se ponian de acuerdo en si añadirla o no, ya que en CSS2 entró como una interesante novedad, pero en CSS2.1 fué retirada. Tuvo que llegar CSS3 y hacer que se la tenga en cuenta.

font-face-browser
(Ver Imagen)

Como podemos ver, la mayoría de navegadores la soporta y nos permite usarla con diferentes formatos.

Forma de uso

Veamos como usamos esta propiedad, que pasa por una declaración de nuestra nueva fuente y una posterior aplicación de esta fuente a nuestros elementos.

Declarando nuestra fuente

La declaración permitirá establecer el nombre y la ubicación de nuestra fuente para que el navegador la descargue y la asocie para que la aplicación nos la muestre.

@font-face {
 font-family: miFuente; /* required */
 src: source;                        /* required */
 font-weight: weight;                /* optional */
 font-style: style;                /* optional */
}

Aplicando nuestras fuentes

Una vez declarada la fuente “miFuente“, ya la podemos usar como si de otra fuente se tratara, simplemente estableciéndola con la propiedad CSS font-family.

h3 {
 font-family: miFuente, arial, helvetica, sans-serif;
}

Detectar la propiedad

Si necesitamos detectar si la propiedad está disponible en el navegador del visitante, Paul Irish nos creó una versión compatible con todos los navegadores modernos.

/*!
 * isFontFaceSupported - v0.9 - 12/19/2009
 * http://paulirish.com/2009/font-face-feature-detection/
 *
 * Copyright (c) 2009 Paul Irish
 * MIT license
 */

var isFontFaceSupported = (function(){

    var fontret,
        fontfaceCheckDelay = 100;

		// IE supports EOT and has had EOT support since IE 5.
		// This is a proprietary standard (ATOW) and thus this off-spec,
		// proprietary test for it is acceptable.
    if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;

    else {

    // Create variables for dedicated @font-face test
      var doc = document, docElement = doc.documentElement,
          st  = doc.createElement('style'),
          spn = doc.createElement('span'),
          wid, nwid, body = doc.body,
          callback, isCallbackCalled;

      // The following is a font, only containing the - character. Thanks Ethan Dunham.
      st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,T1RUTwALAIAAAwAwQ0ZGIMA92IQAAAVAAAAAyUZGVE1VeVesAAAGLAAAABxHREVGADAABAAABgwAAAAgT1MvMlBHT5sAAAEgAAAAYGNtYXAATQPNAAAD1AAAAUpoZWFk8QMKmwAAALwAAAA2aGhlYQS/BDgAAAD0AAAAJGhtdHgHKQAAAAAGSAAAAAxtYXhwAANQAAAAARgAAAAGbmFtZR8kCUMAAAGAAAACUnBvc3T/uAAyAAAFIAAAACAAAQAAAAEAQVTDUm9fDzz1AAsD6AAAAADHUuOGAAAAAMdS44YAAADzAz8BdgAAAAgAAgAAAAAAAAABAAABdgDzAAkDQQAAAAADPwABAAAAAAAAAAAAAAAAAAAAAwAAUAAAAwAAAAICmgGQAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAEZIRAAAQAAgAC0C7v8GAAABdv8NAAAAAQAAAAAAAAAAACAAIAABAAAAFAD2AAEAAAAAAAAAPAB6AAEAAAAAAAEAAgC9AAEAAAAAAAIABwDQAAEAAAAAAAMAEQD8AAEAAAAAAAQAAwEWAAEAAAAAAAUABQEmAAEAAAAAAAYAAgEyAAEAAAAAAA0AAQE5AAEAAAAAABAAAgFBAAEAAAAAABEABwFUAAMAAQQJAAAAeAAAAAMAAQQJAAEABAC3AAMAAQQJAAIADgDAAAMAAQQJAAMAIgDYAAMAAQQJAAQABgEOAAMAAQQJAAUACgEaAAMAAQQJAAYABAEsAAMAAQQJAA0AAgE1AAMAAQQJABAABAE7AAMAAQQJABEADgFEAEcAZQBuAGUAcgBhAHQAZQBkACAAaQBuACAAMgAwADAAOQAgAGIAeQAgAEYAbwBuAHQATABhAGIAIABTAHQAdQBkAGkAbwAuACAAQwBvAHAAeQByAGkAZwBoAHQAIABpAG4AZgBvACAAcABlAG4AZABpAG4AZwAuAABHZW5lcmF0ZWQgaW4gMjAwOSBieSBGb250TGFiIFN0dWRpby4gQ29weXJpZ2h0IGluZm8gcGVuZGluZy4AAFAASQAAUEkAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYATwBOAFQATABBAEIAOgBPAFQARgBFAFgAUABPAFIAVAAARk9OVExBQjpPVEZFWFBPUlQAAFAASQAgAABQSSAAADEALgAwADAAMAAAMS4wMDAAAFAASQAAUEkAACAAACAAAFAASQAAUEkAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAAAAAAADAAAAAwAAABwAAQAAAAAARAADAAEAAAAcAAQAKAAAAAYABAABAAIAIAAt//8AAAAgAC3////h/9UAAQAAAAAAAAAAAQYAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAA/7UAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAQAEBAABAQEDUEkAAQIAAQAu+BAA+BsB+BwC+B0D+BgEWQwDi/eH+dP4CgUcAIwPHAAAEBwAkREcAB4cAKsSAAMCAAEAPQA/AEFHZW5lcmF0ZWQgaW4gMjAwOSBieSBGb250TGFiIFN0dWRpby4gQ29weXJpZ2h0IGluZm8gcGVuZGluZy5QSVBJAAAAAAEADgADAQECAxQODvb3h/cXAfeHBPnT9xf90wYO+IgU+WoVHgoDliX/DAmLDAr3Fwr3FwwMHgoG/wwSAAAAAAEAAAAOAAAAGAAAAAAAAgABAAEAAgABAAQAAAACAAAAAAABAAAAAMbULpkAAAAAx1KUiQAAAADHUpSJAfQAAAH0AAADQQAA)}";
      doc.getElementsByTagName('head')[0].appendChild(st);

      spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 

      if  (!body){
        body = docElement.appendChild(doc.createElement('fontface'));
      } 

      // the data-uri'd font only has the - character
      spn.innerHTML = '-------';
      spn.id        = 'fonttest';

      body.appendChild(spn);
      wid = spn.offsetWidth;

      spn.style.font = '99px testfont,_,serif';

      // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
      fontret = wid !== spn.offsetWidth;

      var delayedCheck = function(){
        if (isCallbackCalled) return;
        fontret = wid !== spn.offsetWidth;
        callback && (isCallbackCalled = true) && callback(fontret);
      }

      addEventListener('load',delayedCheck,false);
      setTimeout(delayedCheck,fontfaceCheckDelay);
    }

    function ret(){  return fontret || wid !== spn.offsetWidth; };

    // allow for a callback
    ret.ready = function(fn){
      (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
    }  

    return ret;
})();

Si solo necesitas comprobarlo sobre Firefox, Safari, Chrome y Opera, te puedes ahorrar todo este código y usar la siguiente comprobación:

if (!!window.CSSFontFaceRule) ...

Alternativas

Mientras los usuarios se adaptan a estas nuevas propiedades siempre es conveniente usar alternativas que ofrezcan un resultado similar. Para conseguir esto, la solución pasa por usar alguna de las que ya hemos visto anteriormente:

  1. sIFR 2.0
  2. cufón
  3. P+C DTR
  4. FLIR
  5. SIIR
  6. DTR
  7. sIFR 3
  8. Typeface.js
  9. IFR
  10. PHP+CSS DTR
  11. CSS Image Replacement [static]
  12. swfir

Más información

MarkerCSS, framework CSS español para maquetar más fácilmente

28 ene

+ 10

MarketCSS es un framework CSS desarrollado por Jose Castro que nos permite simplificar la tarea de maquetar en CSS.

// Referencia "lh" + número de 80 a 200 de 10 en 10
// Interlineado de 80% a 200% de 10 en 10; por ejemplo "lh120"
<div class="lh120"></div>

// Referencia "b" negrita
<div class="b"></div>

// Referencia "i" cursiva
<div class="i"></div>

// Referencia "n" normal
<div class="n"></div>

// Referencia "u" subrayado
<div class="u"></div>

Mediante un sistema de referencias, que usaremos como clases en los elementos de nuestro HTML, obtendremos los resultados preestablecidos ahorrándonos una buena cantidad de código CSS.

Via

Impresionante Coca-Cola CSS

27 ene

+ 6

Román Cortés, es un verdadero crack y nos lo muestra con algunos de los ejemplos de sus efectos que hemos mostrado aquí. Sin duda, aprovecha las propiedades del HTML/CSS para hacer cosas realmente sorprendentes.

cocacolacss
(Ver Imagen)

La última ha sido esta Coca Cola CSS, partiendo de otro anterior basado en el mismo principio, que mediante el desplazamiento del scroll se desplaza por nuestra pantalla. Ver el Ejemplo.

Curioso bug de RGBa en Internet Explorer (¿como no?)

25 ene

+ 6

La implementación de RGBa para fondos, es algo que poco a poco se va implementando en la mayoría de navegadores, aunque como era de esperar Internet Explorer no lo ha hecho.

La gente de CSS-Trick, comenta un bug detectado por Dam Bean que se produce al usar el color alternativo para estos navegadores.

div {
 // IE6 y 7 lo omite (en IE8 se ve bien)
 background-color: rgb(255,0,0);

 // Solución para estos navegadores
 background-color: #fd7e7e;

 // RGBa CSS3
 background-color: rgba(255,0,0,0.5);
}

Por tema de compatibilidad, usamos un doble sistema de background-color, con el fin de ofrecer un color alternativo al navegador que no soporte el estandar RGBa. Como vemos en la imagen, este no funciona (en IE 6-7) si usamos una abreviatura o el código hexadecimal del mismo. En caso de no usarlo, Internet Explorer no usará ningún color dejando el elemento sin colorido.

En fin… otro más :D

Deshabilitar el editor HTML de nuestro WordPress

19 ene

+ 7

Aunque sin él yo no podría escribir mis artículos, es posible deshabilitar el editor HTML de nuestro WordPress de una forma sencilla con alguna de estas opciones:

1) CSS: La opción con más estilo (¿lo pillais? :P)

Sin duda se trata de la solución más rápida y sencilla ya que simplemente tendremos que añadir un estilo CSS al panel de administrador.

// Añadir el CSS directamente
function removeHTMLEditorCSS(){
 echo '<style type="text/css">#editor-toolbar #edButtonHTML, #quicktags {display: none;}</style>';
}

add_action('admin_head', 'removeHTMLEditorCSS');

// Añadir un fichero CSS externo
fichero: removeHTMLEditor.css
#editor-toolbar #edButtonHTML, #quicktags {display: none;}

wp_register_style('removeHTMLEditorCSS', '/ruta/css/removeHTMLEditor.css');
wp_enqueue_style('removeHTMLEditorCSS');

2) Javascript: La más rápida

Desde Javascript podemos borrar directamente el botón y no permitir usar esta opción:

function removeHTMLEditorJS(){
 echo 'jQuery(document).ready(function($) {
         $("#edButtonHTML").remove();
       });';
}

add_action('admin_footer', 'removeHTMLEditorJS');

3) PHP: La más limpia

En las dos anteriores, aunque son efectivas, dejamos la opción de recuperar la opción directamente desde el mismo navegador, desde PHP podemos eliminar el botón dejando la opción perfectamente deshabilitada.

function my_default_editor() {
 $r = 'tinymce'; // html or tinymce
 return $r;
}
add_filter( 'wp_default_editor', 'my_default_editor' );

// Versión reducida
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

Conclusión

Siempre que puedas estas cosas, deberían ir en un fichero de configuración alojado en el servidor y todas las opciones son igual de válidas.

ie-css3.js: Pseudo selectores CSS3 en Internet Explorer

18 ene

+ 8

ie-css3.js permite que Internet Explorer identifique los pseudo selectores CSS3 y aplique los estilos asociados a ellos en nuestras páginas. Solo tendremos que incluir un fichero Javascript para poder empezar a disfrutrar de este script.

Requerimientos

El script necesita el framework DOMAssistant para funcionar, aunque no creo que adaptarlo para cualquier otro framework sea áltamente complicado. He intentado migrarlo a jQuery y MooTools y me he encontrado con la limitación de pseudo-selectores disponibles en los frameworks. Por ejemplo :nth-of-type() no está disponible en ninguno de los dos anteriores.

Instalación

Simplemente tendremos que añadir al <head /> de nuestra página la llamada a los dos ficheros javascript que necesitamos:

<head>
	<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
	<script type="text/javascript" src="ie-css3.js"></script>
</head>

Selectores soportados

No están todos, pero con estos ya podemos ir haciendo más cómoda la tarea de maquetar una página para Internet Explorer. :nth-child,:nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, : only-child, :first-of-type, :last-of-type, : only-of-type, :empty

Consideraciones

Al tratarse de una versión bastante temprana tenemos que tener en cuenta una serie de consideraciones o limitaciones con las que tendremos que lidiar:

  • Los ficheros CSS deben ser llamados mediante el uso del tag <link /> aunque dentro de ellos podrás usar @import sin problemas. No será posible usar el CSS a nivel de página.
  • El fichero CSS deberá estar alojado en el dominio de la página.
  • El protocolo file:// para llamar a las CSS no funcionará por temas de seguridad.
  • El selector :not() no está soportado
  • La emulación no es dinámica, una vez aplicada los estilos los cambios en el DOM no se verán reflejados.
  • Es compatible con las versiones 5,6,7,8 de Internet Explorer.

No es la panacea, pero seguro que a más de uno le puede sacar de un aprieto :D

RMSforms, frameworks CSS especializado en formularios

1 ene

+ 3

Hace casi 1 año que Rob Sandy publicó la versión 0.5 de RMSforms, un framework CSS sencillo y escueto especializado en formularios.

<fieldset>
 <legend></legend>
 <ul class="form [modifier]">
 <li><label class="[label modifier]"></label><input/></li>
 </ul>
 ....
</fieldset>;

El framework, como casi todos los frameworks CSS, se basa en la inclusión de modificaciones en el atributo class de los elementos de nuestro formulario.

En este ejemplo, nos muestra un listado de <input /> que mediante una serie de modificadores nos permitirá estilizar nuestros formularios.

Modificadores

Al estar especializado en formularios, sus opciones son muy limitadas. Los modificadores necesarios para estructurar nuestros formularios son:

  • vvv – Vertical <li>, Vertical <label>, Vertical form fields
  • hvv – Horizontal <li>, Vertical <label>, Vertical form fields
  • hii – Horizontal <li>, Inline <label>, Inline form fields
  • hhh – Horizontal <li>, Horizontal <label>, Horizontal form fields
  • vii – Vertical <li>, Inline <label>, Inline form fields
  • vhh – Vertical <li>, Horizontal <label>, Horizontal form fields

Donde cada letra significa:

  • H = Horizonal Block
  • V = Vertical Block
  • I = Inline

Podemos ver unos ejemplos directamente aquí.

9 formas de ofuscar emails a prueba

28 dic

+ 15

Poner email en texto plano en una página puede llegar a ser un verdadero problema, ya que hay bots que escanean nuestras páginas buscándolas y almacenándolas junto a otras para posteriormente usarlas para enviar SPAM a esas cuentas. Evitar esto no siempre es sencillo, ya que muchos pueden permitirse el lujo de eliminar los emails, otros necesitan ponerlos visibles al público. Por eso, los desarrolladores encuentran formas ingeniosas para sortear este obstáculo.

¿Pero cuanto de efectivo tiene cada una de las formas posibles?

obfuscation_methods
(Ver Imagen)

Como vemos en la imagen, técnicas como construir la dirección con Javascript o introducir comentarios entre los tags no solucionan el problema aunque lo minimizan. Según las pruebas que Tillate.com realizó hace ya más de 1 año, estas son las 3 formas más seguras de usar emails en nuestras páginas.

Cambiar la dirección mediante CSS

Para esta ténica basamos nuestra protección en la propiedad direction del CSS que nos permite especificar la dirección del texto que el usuario verá, como los bots no suelen interpretar el CSS verán el texto en el formato original.

<span>moc.olpmeje@liame</span>
// CSS
span.direction {
 direction:rtl;
 unicode-bidi:bidi-override;
}

Usando display:none de CSS

Otra alternativa, tambien pasando por CSS sería la usar display:none, para colar un texto en nuestra dirección ocultándolo al usuario. De esta forma el email encontrado por el bot no será válido.

<style type="text/css">
  p span.displaynone { display:none; }
</style>
<p>silvanfoobar8@<span class=”displaynone”>null</span>tilllate.com</p>

Encriptación ROT13

Usando el método de encriptación ROT13 y mediante Javascript desencriptamos la dirección y se la mostramos al usuario. Previamente debemos haber encriptado la dirección con alguna herramienta de encriptación (por ejemplo esta) o rotarla directamente desde PHP con str_rot13().

<script type="text/javascript">
document.write("<n uers=\"znvygb:fvyinasbbone10@gvyyyngr.pbz\" ery=\"absbyybj\">".replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
</script>silvanfoobar’s Mail</a>

Es cuestión de tiempo que los bots, cada vez más inteligentes, puedan con ellas, pero por el momento es lo mejor que tenemos sin tener que reccurrir a incluir una imágen con nuestro email (que también es muy efectivo). Las 3 técnicas afectarán a la accesibilidad de la página.

JSSS, las CSS hechas JSON

22 dic

+ 4

Una interesante idea me encuentro por delicious esta mañana. Se trata de JSSS, una implementacion (muy sencilla) para conseguir JSON que genere CSS. La idea es solucionar algunas de las carencias de CSS:

  • CSS no es un lenguaje de programación (no hay variables, funciones, no lógica)
  • Las propiedades CSS no son cross-browser
  • Los frameworks CSS están pensado para trabajar en lado del servidor y necesitamos que se ejecute en el cliente
  • Incluir dinámicamente CSS en el DOM no garantiza que las clases CSS sean cross-browser

Por ese motivo, las hojas de estilo JSON pretenden aportar las ventajas de Javascript:

  • Todas las propiedades CSS están almacenadas en objetos JSON
  • Las propiedades y clases CSS pueden ser manipuladas via Javascript
  • Las propiedades y clases pueden ser dinámicas en tiempo de ejecución
  • Todo el sistema de plantillas CSS es gestionado desde el cliente

Código (jQuery)

function parseCSS(id,css){
  for(style in css){
    if(typeof css[style] == 'object'){parseCSS(style,css[style]);
    else{$(id).css(style,css[style]);}
  }
};

Ejemplo de uso

var drip = {};
drip.toolbar = {};

drip.toolbar.css = {
  height : "40px",
  width : "89px",
  position :"fixed",
  right : 50,
  bottom : 0,
  overflow : "hidden",
  cursor : "pointer",
  color : "#FEFEFE",
  "background-color": "#932c2c",
  "text-align" : "left",
  "font-family" : "Arial, Helvetica, sans-serif",
  "font-size" : "12px",

  "#drip-toolbar-button" : {
	height : "30px",
	width : "50px",
	cursor : "pointer",
  },

  ".links" : {
	  color : "#FEFEFE"
  }

};
// Parseamos JSSS
parseCSS('#drip-toolbar', drip.toolbar.css);

Opinión

La idea es interesante, y lleva más de 10 años dando vueltas por Internet, es cierto que se permite un mayor control del CSS en el lado del cliente, pero depende completamente de que este tenga javascript o lo esté ejecutando en este momento.