jueves, 27 de marzo de 2014

El uso de !important en CSS

Si ustedes han sido un poco curiosos y han revisado el CSS de alguna pagina web o framework habran notado el uso de  !important en el codigo por ejemplo puede aparecer de esta manera.



La manera en como el navegador aplica estilos CSS esta relacionado con 3 conceptos : Importancia , especificidad(mas especifico) y orden de las declaraciones, al final del proceso se asignan pesos a cada declaración CSS y este peso determina que estilos son aplicados sobre los demás.

Vamos a recordar un poco como es que el navegador decide aplicar estilos a las paginas web, por ejemplo normalmente esta es la jerarquía en la cual el navegador decide cuales estilos aplicar cuando encuentra muchas declaraciones CSS :
  • Busca todas las declaraciones CSS para aplicar al elemento.
  • Aplica el estilo al elemento basado en los conceptos de  "importancia" y "orden de las declaraciones" en el siguiente orden, siendo el ultimo con mas peso para ser aplicado:
    • Declaracion CSS del user agent (estilos por defecto del navegador).
    • Declaracion CSS del usuario.(opciones en el navegador configuradas por el usuario)
    • Declaracion del autor.(scripts CSS  o estilos insertador en el html)
    • Declaracion del autor con !important.
    • Declaracion del usuario con !important.
  • Aplica el estilo basándose en la declaración mas especifica, siendo el selector mas especifico el ganador
  • Si existen 2 selectores idénticos, gana el ultimo en el orden de declaración.
  • Aplica el estilo basado en el orden en el aparecen en el documento, el ultimo siempre gana.
Podrás haber notado como el uso de !important modifica el comportamiento del navegador para aplicar estilos. El uso de !important es la manera que tenemos para dar mas valor a un selector del que naturalmente tiene, A continuacion un ejemplo de como important afecta el flujo natural.


Puedes ver como el color rojo prevalece a pesar del orden de las ultimas declaraciones CSS y aun siendo mas especificas. A pesar del sus potenciales usos para forzar la reescritura de estilos CSS, el uso de !important es considerado por algunos como una mala practica.

Solo debería de usarse cuando sea verdaderamente necesario, si no muchas partes de tu código CSS serán muy difícil de mantener. Tal vez para reparar algunas secciones temporales ó sobrescribir estilo de alguna librería externa.

link: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
link: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

Comparte tus bookmarks: http://unitedbookmark.com/


miércoles, 12 de marzo de 2014

Formularios html 5 y JavaScript validation API , descubre lo que puedes hacer con tus formularios

Gracias a HTML 5 ahora tenemos a nuestra disposición nuevas formas de validar y asegurar la integridad de los datos ingresados por el usuario,  a continuación veremos algunas de ellas :

Pattern Attribute : Con esta propiedad puedes especificar una expresión regular para validar el texto en un input. Podemos ver un ejemplo en la w3school sobre un input donde requiere que el dato ingresado sea 3 letras en mayúsculas, aqui el  ejemplo.

Mas información sobre aqui

Maxlenght :  Si queremos limitar la cantidad de información ingresada en un input podemos usar este atributo, aqui el ejemplo 

novalidate : Este atributo es usado para indicar que un formulario no sera validado, no puedo imaginar un caso de uso para este atributo pero es bueno saber que existe, aquí el ejemplo 

Constraint Validation

Antes de que los datos de un formulario sean enviados al servidor, el navegador verifica los inputs para confirmar si son correctos con una serie de algoritmos y si encuentra algún error en ellos mostrara el siguiente error:


Existe algo llamado  "Constraint API" que son una serie de métodos y propiedades DOM de las cuales podemos hacer uso para un mayor control de nuestros formularios. 

willValidate : Este método nos indica si un input sera validado o no cuando el formulario sea enviado. Ejemplo : 

<input type="text" id="name" />
<script>
   
document.getElementById('name').willValidate; //true
</script>

Validity: Devuelve un objecto javascript con propiedades útiles para determinar si un input es valido como: 
  • patternMismatch : Devuelve true si el valor del input no concuerda con la expresion regular en el attributo pattern.
<input id="bar" pattern="[0-9]{4}" value="ABCD" />
<script>   
   
document.getElementById('bar').validity.patternMismatch; //true
</script>
  • rangeOverflow : Devuelve true si el valor del input es max alto que su atributo max.
<input id="bar" type="number" max="2" value="3" />
<script>
   
document.getElementById('bar').validity.rangeOverflow; //true
</script>
  • rangeUnderflow: Devuelve true si el valor del input esta por debajo de su atributo min.
<input id="bar" type="number" min="2" value="1" />
<script>
   
document.getElementById('bar').validity.rangeUnderflow; //true
</script>
  • typeMismatch :  Devuelve true si el valor del input no es del mismo tipo del especificado en el atributo type.
<input id="bar" type="url" value="foo" />
<input id="bar2" type="email" value="bar" />
<script>
   
document.getElementById('bar').validity.typeMismatch; //true
   
document.getElementById('bar2').validity.typeMismatch; //true
</script>
  • valueMissing: Devuelve true si el input es tiene el atributo required y no tiene ningún valor
<input id="foo" type="text" required value="foo" />
<input id="bar" type="text" required value="" />
<script>
   
document.getElementById('foo').validity.valueMissing; //false
   
document.getElementById('bar').validity.valueMissing; //true
</script>
  • stepMismatch: devuelve true si el valor del input no es acorde con el especificado en el atributo step.
  • tooLong: Devuelve true si el valor del input es mayor que el especificado en el atributo maxlength, una cosa interesante aqui es que los navegadores no permiten que esto pase por efecto.
  • valid : Devuelve true si todas las condiciones anteriores son false.
<input id="valid-1" type="text" required value="foo" />
<input id="valid-2" type="text" required value="" />
<script>
   
document.getElementById('valid-1').validity.valid; //true
   
document.getElementById('valid-2').validity.valid; //false
</script>



validationMessage : Esta propiedad contiene el mensaje que se muestra cuando un input no cumple con las validaciones del formulario.


<input type="text" id="foo" required />
<script>
   
document.getElementById('foo').validationMessage;
   
//Chrome  --> 'Please fill out this field.'
   
//Firefox --> 'Please fill out this field.'
   
//Safari  --> 'value missing'
   
//IE10    --> 'This is a required field.'
   
//Opera   --> ''
</script>

checkValidity : Este es un método que devuelve true si un elemento de formulario contiene datos validos.(input, textarea, ect)

<form id="form-1">
   
<input id="input-1" type="text" required />
</form>
<form id="form-2">
   
<input id="input-2" type="text" />
</form>
<script>
   
document.getElementById('form-1').checkValidity();  //false
   
document.getElementById('input-1').checkValidity(); //false
   
document.getElementById('form-2').checkValidity();  //true
   
document.getElementById('input-2').checkValidity(); //true
</script>

Cada vez que un elemento de formulario es verificado con "checkValidity" y falla, un evento "invalid" es disparado en ese elemento. Podemos usar este evento para hacer cualquier cosa que queramos. También como no existe el evento "valid" en su lugar se usa "change".

<form id="form-1">
   
<input id="input-1" type="text" required />
</form>
<script>
document.getElementById('input-1').addEventListener('invalid', function() {//you code here, whatever you wnat here
},
false);

document.getElementById('input-1').addEventListener('change', function(event) {
   
if (event.target.validity.valid) {
       
//Field contains valid data.
   }
else {
       
//Field contains invalid data.
   }
},
false);

</script>

Datalist : Es un elemento para sugerencias muy al estilo de autocompletado, ejemplo.

autocomplete : Con este atributo puedes desactivar el autocompletado del navegador, ejemplo.

autofocus: puedes usar este atributo para que un elemento de formulario tome el foco apenas la vista sea cargada, pero solo puedes asignarlo a uno que sera el que por defecto sera el primero a llenar, ejemplo.

stepUp: Método que incrementa al siguiente valor logico en inputs date y numeric.
stepDown : Método que decrementa al siguiente valor lógico en inputs date y numeric.

document.getElementById('date').stepUp()document.getElementById('date').stepDown()

valueAsNumber: Propiedad que devuelve el valor de un input como numero, para no tener que usar a cada momento parseInt() o parseFloat().

document.getElementById('date').valueAsNumber

valueAsDate: Propiedad que devuelve el valor como un objecto date, ejemplo.

Existen casos donde algunas veces tenemos que agregar valores adicionales al formulario, pero que no se tienen que mostrar al usuario, lo mas común es usar un "input hidden", pero ahora puedes usar el nuevo objecto formData como lo describen en el siguiente link :


Básicamente seria de la siguiente manera sin usar inputs hidden :

var formElement = document.getElementById("myFormElement");
formData =
new FormData(formElement);
formData.append(
"serialnumber", serialNumber++);

Con el mismo objecto formData puedes crear formularios al vuelo y enviar los datos al servidor por ajax sin que exista el formulario en el DOM. puedes ver el ejemplo en el link anterior.

Propiedades y metodos adicionales en los siguientes links.