Contenido

Google Font Directory, WebFonts disponibles para todos

20 may

+ 17

Google Font Directory es un repositorio que Google pone a la disposición de todos los desarrolladores donde unificar diferentes fuentes que podremos usar como webfonts en nuestras aplicaciones web.

fonts_before_webfonts_after
(Ver Imagen)

El directorio, contiene por el momento un número reducido de fuentes disponibles, así como ejemplos de como quedan y obviamente el código necesario para incluirlo en nuestras aplicaciones web.

// HTML
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
// CSS
h1 { font-family: 'Crimson Text', arial, serif; }
// @import
@import url(http://fonts.googleapis.com/css?family=Crimson+Text);

Javascript

Paul Irish publica un artículo en el que nos ilustra de las opciones disponibles de Google Font Directory, así como de WebFont Loader, una librería Javascript ideada para trabajar con el repositorio de Google con la colaboración de la gente de TypeKit.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>

Además, nos muestra Font Previewer (con jQuery) :D

En la vida como en LOST, no todo es malo ni todo es bueno. Ni Google es lo peor del mundo ni es el salvador que todosesperabamos, pero hay días en los que lo parezca :D

Internet Explorer 9, ¿el navegador definitivo?

8 may

+ 59

NetVicious me muestra un enlace directo al MSDN de Microsoft en el que nos muestra los resultados de una serie de tests realizados con los principales navegadores sobe elementos HTML5, DOM Level3, CSS3, SVG,…

IE9-HTML5-status
(Ver Imagen)

En los resultados vemos como Internet Explorer 9, consigue un 100% sobre todos los tests realizados frente a los demás navegadores actuales. Según comentan estos resultados están basados en 192 tests realizados en colaboración con la W3C para evaluar el estado de los navegadores actuales.Podemos acceder a cada uno de los tests accediendo directamente desde el enlace en la sección y módulo indicado.

Suelo pecar de ingenuo y esta vez quiero ser cauto, pero si estos resultados son verdad, estamos a punto de vivir una revolución en Internet. ¿Os imáginais un Internet Explorer completamente adaptado a los estándares web? ¿Se acabaron las limitaciones?

Añade soporte CSS3 a Internet Explorer 6, 7 y 8

12 abr

+ 34

Internet Explorer 6, 7 e incluso la versión 8, aún no soporta ciertas características del estándar CSS3. Para ello, generalmente tenemos que hacer uso de hacks o  soluciones poco recomendadas como generar una serie de capas para simular una sombra o un borde redondeado.

Una solución muy limpia es la de importar mediante behavior() un fichero .htc que nos añadirá al navegador (IE6,7,8) algunas de las características que cualquier otro navegador ya podemos disfrutar.

.box {
 -moz-border-radius: 15px; /* Firefox */
 -webkit-border-radius: 15px; /* Safari and Chrome */
 border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

 -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
 -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
 box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

 behavior: url(ie-css3.htc); /* Activamos el soporte para IE */
}

Como podemos ver, añadimos la llamada behavior() a la especificación de la clase .box. Esto hará que Internet Explorer 6+ use la especificación CSS3 (osea la versión sin prefijos) aplicando los estilos deseados. Para ello usará estándares de Internet Explorer disponibles únicamente para estos navegadores. Simplemente tendremos que descargar el fichero .htc y usarlo como vemos en el ejemplo anterior.

Tabla de compatibilidades CSS3/HTML5 en los diferentes navegadores

23 mar

+ 16

Útil listado de compatibilidades CSS3 y HTML5 disponibles en los diferentes navegadores web. Muy útil para saber si esa propiedad nueva que queremos utilizar está disponible para la mayoría de navegadores.

El poder oculto de border-radius

11 feb

+ 11

Ya conocemos border-radius, la propiedad CSS que nos permite redondear los elementos de nuestras páginas mediante CSS. Aunque la propiedad aún no está correctamente integrada en los navegadores actuales, podemos disfrutar de ella mediante el uso de los correspondientes prefijos:

// Mozilla
-moz-border-radius:1em;

// WebKit
-webkit-border-radius:1em;

// W3C
border-radius:1em;

Aún así, hay gente que ha estado haciendo cosas realmente interesantes con ella.

border-radius
(Ver Imagen)

Código

#wrapper{
 width: 1000px;
 margin: auto;
 position: relative;
}
#circle{
 position: absolute;
 top: 100px;
 left: 0;
 z-index: 0;
 width: 200px;
 height: 200px;
 background-color: #a72525;
 -webkit-border-radius: 100px;
}

#circle1{
 position: absolute;
 top: 105px;
 left: 5px;
 z-index: 1;
 width: 200px;
 height: 200px;
 background-color: #efefef;
 -webkit-border-radius: 100px;
}

Quizás no le encontremos una utilidad real, pero como curiosidad es interesante :D

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,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)}";
      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

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

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

@font-face en profundidad

5 oct

+ 3

Interesante artículo que nos muestra en profundidad esta propiedad CSS3 (@font-face) que nos permite usar nuestras propias fuentes en nuestras páginas web. Desde como integrarlo hasta las diferentes visuales entre los diferentes navegadores, pasando por los formatos soportados en cada navegador. Altamente recomendable.

Soluciones CSS3 a limitaciones de CSS

9 sep

+ 0

Hace unos meses vimos como podríamos conseguir algunas de las características CSS3 mediante el uso de jQuery. Estas características visuales permite compensar, actualmente, alguna de las carencias del CSS con el que tenemos que lidiar día a día. Nettuts, publica un artículo muy interesante con 11 de las técnicas CSS más comunes que con CSS3 serán más fácil del realizar.