Técnicas esenciales de HTML, CSS y JavaScript

Autor: Monica Porter

Fecha De Creación: 22 Marcha 2021

Fecha De Actualización: 17 Mayo 2024

Técnicas esenciales de HTML, CSS y JavaScript - Creativo

Contenido

Diseño
Clearfix
Tamaño de caja
Varias columnas
Cálculos
Estilo
Transparencia
Filtros
Reemplazo de imagen
Video responsivo
Funcionalidad
Seleccionar elementos fácilmente
Creando nuevas matrices
Limpiar documentos y objetos de ventana
¿Me gusto esto? ¡Lee esto!

Este artículo apareció por primera vez en el número 234 de la revista .net, la revista más vendida del mundo para diseñadores y desarrolladores web.

Una técnica, en su esencia, es una forma de realizar una tarea y, siendo desarrolladores y diseñadores frontend, tenemos muchas tareas. Dicho esto, a menudo olvidamos cuánto ha cambiado este panorama. De 2002 a 2010, nuestra comunidad estuvo podrida por el exceso de código y recursos, lo que obstaculizó el rendimiento y la capacidad de mantenimiento. Para superar esto, creamos una serie de consejos, trucos y trucos que denominamos "técnica". Seguíamos cumpliendo tareas, pero no de la manera más eficiente.

Haciendo un 360, en los últimos años hemos visto mejores estándares e implementaciones de estándares cobrar vida, lo que nos permite, como comunidad, desarrollar "técnicas" más nuevas y avanzadas. Este nuevo panorama es lo que se considera la "web moderna".

A medida que la "Web 2.0" se estancó y se volvió confusa, también lo hará la "web moderna". Dale tiempo. Dicho esto, por ahora, podemos usar y abusar del término siempre que exista un entendimiento común de lo que representa.

En 2010 aterrizó la especificación HTML5, proporcionando un entorno web completamente nuevo y semi-estandarizado. Navegadores como Opera, Firefox, Chrome y Safari adoptaron esta nueva ola y llevaron a sus equipos de desarrollo a nuevos límites de implementación de estándares y exploración de API. Para darle una idea de cuán "integrados" son estos navegadores, consulte las visualizaciones de www.html5readiness.com sobre los cambios en la compatibilidad con HTML5.

No se preocupe por la falta de soporte en Internet Explorer. Podemos combatir esto gracias a Google Chrome Frame. Desde que Google lo introdujo en 2010, se ha convertido en el mecanismo de soporte de referencia para Internet Explorer. Todas las versiones de IE se pueden orientar con Chrome Frame, lo que solicita a un nuevo usuario que descargue un complemento que muestra los sitios web habilitados con una versión ligera de Chrome, dentro de IE. Para implementar Chrome Frame, agregamos la siguiente meta> etiqueta dentro de la etiqueta head> de nuestro sitio.

meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />

Desde aquí podemos solicitar a los usuarios de IE que descarguen el complemento, si aún no está instalado, usando JavaScript:

tipo de script = "texto / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
guión>
window.onload = function () {
CFInstall.check ({
modo: "superposición",
destino: "http://www.yourdomain.com"
});
};
/ script>

El destino se puede configurar para enviar al usuario a un determinado enlace después de instalar el complemento. Una advertencia: aunque Chrome Frame nos brinda un método para desarrollar estrictamente para navegadores realmente modernos, no debemos olvidar que el usuario tiene la opción de no descargar el complemento si no lo desea. Si no es así, y debe proporcionar soporte para una u otras versiones diferentes de IE, tendrá que dedicar más tiempo a averiguar qué puede y qué no puede proporcionar, con sus experiencias, en varios navegadores..

Con este código que proporciona un campo de juego considerablemente más nivelado en el que desarrollar en la pila web moderna, podemos avanzar con la mente a gusto. Es posible que recuerde haber tenido que crear una serie de trucos específicos del navegador para que su sitio se estructurara correctamente en todos los navegadores, creando una innumerable cantidad de elementos vacíos para usar con sus imágenes cortadas, o incluso escribiendo código JavaScript excesivamente detallado o redundante para obtener el la funcionalidad más simple para trabajar. Todos estos dolores son, en cierto sentido, los mismos problemas que nos preocupan hoy. Seguimos luchando por tener más control y mejores herramientas para combatir el diseño, el estilo y la funcionalidad, pero en un nivel que es maduro.

Diseño

Clearfix

La flotación de un elemento se introdujo de nuevo en CSS 2.1, pero nunca resultó ser la solución completa que esperábamos. Uno de los mayores problemas era mantener las dimensiones de un elemento padre cuando un elemento hijo flotaba. Para abordar esto, se creó la técnica clearfix.

Toma el siguiente HTML:

div>
div> ... / div>
div> ... / div>
/ div>

Esta técnica fue escrita por Nicolas Gallagher:

.clearfix: antes,
.clearfix: después de {
contenido: " ";
pantalla: mesa;
}
.clearfix: después de {
Limpia los dos;
}
.clearfix {
* zoom: 1;
}

Si usa HTML5Boilerplate para iniciar sus proyectos, entonces ya tendrá esta versión de la técnica clearfix incorporada.

Tamaño de caja

Durante años, los desarrolladores debatieron qué implementación del modelo de caja tenía más sentido. El modo Quirks vs Standards realmente significaba: "si las dimensiones de un elemento cambian, después de haber sido configurado, cuando se aplican los bordes y el relleno, o no".

Ahora hay un consenso generalizado en que tiene más sentido que los bordes y el relleno eliminen el espacio disponible dentro de un elemento y no aumenten el ancho o la altura del elemento. El debate se ha vuelto irrelevante con la implementación generalizada del dimensionamiento de cajas. El navegador se guiará por usted en lugar de viceversa.

Popularizada por Chris Coyier y Paul Irish, una técnica que lo abarca todo se puede implementar con lo siguiente:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
tamaño de caja: caja de borde;
}

Se ha debatido el uso del selector * en CSS, debido a posibles impactos en el rendimiento. Este tipo de afirmaciones son frívolas si no está hiperoptimizando todos los demás aspectos de su sitio web / aplicación. El uso de border-box hará que el navegador agregue relleno y bordes dentro del conjunto de espacios disponibles. El "Modo estándar" se puede utilizar configurando el tamaño del cuadro en el cuadro de contenido.

Varias columnas

La web se inspiró en gran medida en la forma y el tipo escritos. Desafortunadamente, nos quedamos atascados en la fase de pergamino. Algunos de estos problemas están llegando a un punto crítico con las tan esperadas especificaciones de Paged-Media y CSS Regions. Dicho esto, los primeros pasos hacia diseños más parecidos a revistas se dieron cuando los navegadores comenzaron a implementar múltiples columnas CSS. El código para generar este efecto es bastante sencillo:

pag {
-contador-de-columnas-kit-web: 2;
-moz-column-count: 2;
recuento de columnas: 2;
}

Puede obtener más información sobre la especificación de múltiples columnas CSS3, así como un respaldo de JavaScript que puede usar para cualquier navegador sin soporte, en el blog de A List Apart.

Cálculos

Calcular las dimensiones puede resultar complicado. En los viejos tiempos, no teníamos forma de hacer ningún tipo de cálculo de unidades, y mucho menos cálculos de unidades mixtas. Todo eso ha cambiado gracias a calc. Creando un efecto acolchado que no afecta el ancho de los elementos iniciales o utiliza algo como box-sizing: border-box; Hasta hace poco, solo era posible agregando elementos contenedores adicionales.

.padded {
margen: 0 automático;
posición: relativa;
ancho: -webkit-calc (100% - (20px * 2));
ancho: -moz-calc (100% - (20px * 2));
ancho: calc (100% - (20px * 2));
}

calc () se encarga del cálculo de ancho adecuado basado en el ancho principal de .padded y menos un relleno definido de 20px. Multipliqué esto por 2 para cada lado de mi elemento, centrando el elemento utilizando un posicionamiento relativo y un margen izquierdo y derecho automático.

Estilo

Transparencia

Obtener el estilo correcto de un elemento siempre ha dependido del tipo de herramientas que tenemos disponibles en CSS. La transparencia es una de las primeras variantes de soporte con las que se encontrará a principios o mediados de la década de 2000.

Con la llegada de HTML5 y los esfuerzos de estándares más enfocados, los navegadores tienen una implementación estándar de la propiedad de opacidad y han expuesto el soporte de canal alfa según la nueva especificación del Módulo de color. Esto incluye las pautas RGBA y HSLA.

a {
color: rgba (0,255,0,0,5);
fondo: rgba (0,0,255,0.05);
borde: rgba (255,0,0,0.5);
}

Puede usar colores RGBA o HSLA donde quiera que encuentre valores HEX. También hay una lista ampliada de colores divertidos con nombres definidos que puede consultar directamente en la especificación. Estos son útiles cuando desea crear una combinación dinámica entre elementos.

Filtros

Los filtros CSS son extremadamente emocionantes. Tener la capacidad de cambiar dinámicamente la apariencia de los elementos en una página sin la necesidad de complementos de terceros es asombroso y ayudará a reducir enormemente el tiempo dedicado a Photoshop.

img src = "mercado.webp">
img {
-webkit-filter: escala de grises (100%);
}

Los filtros CSS solo se admiten actualmente en los navegadores WebKit, por lo que su uso debe ser de naturaleza aditiva, no dependiente. Leer más aquí.

Reemplazo de imagen

Reemplazar texto con imágenes ha existido durante mucho tiempo. Desafortunadamente, todavía existen inconvenientes, en cuanto a accesibilidad, a las últimas y más sofisticadas técnicas de reemplazo de imágenes. Pero recientemente han salido a la luz dos que son extremadamente inteligentes y únicos en sus propios derechos. El primero fue escrito por Scott Kellman:

h1 class = ’hide-text’> Logotipo de mi sitio web / h1>
.hide-text {
sangría de texto: 100%;
espacio en blanco: nowrap;
desbordamiento: oculto;
}

El segundo fue escrito por Nicolas Gallagher:

.hide-text {
fuente: 0/0 a;
sombra de texto: ninguna;
color: transparente;
}

Video responsivo

Lograr que los medios se escalen correctamente en un entorno receptivo puede ser un desafío. Con cada vez más sitios web que respetan el diseño adaptativo, es esencial manejar correctamente las dimensiones y la relación de aspecto de los elementos.

El video integrado ha sido uno de los tipos de medios más difíciles de discutir debido a la forma en que los servicios de terceros ofrecen el contenido. Una inserción típica de YouTube se parece a esto:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

El elemento iframe contiene un objeto Flash o un elemento incrustado. Usando algo como iframe {maxwidth: 100%; } no funcionará porque los elementos anidados no cambian de tamaño correctamente cuando cambia el ancho. Entonces, tenemos que hacer algunos trucos.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Envolver el iframe en otro elemento nos dará el control que necesitamos para agregar la funcionalidad de respuesta adecuada al video.

.video {
posición: relativa;
fondo acolchado: 56,25%;
altura: 0;
desbordamiento: oculto;
}
.video iframe,
.objeto de video,
.video incrustado {
posición: absoluta;
arriba: 0;
izquierda: 0;
ancho: 100%;
altura: 100%;
}

Configuración del padding-bottom del contenedor de video: 56.25%; es la magia de este método. El uso de relleno significa que el porcentaje utilizado se basará en el ancho del padre; "56 .25%" creará una relación de aspecto de 16: 9. Haz las matemáticas tú mismo, si quieres. 9/16 = 0,5625. 0.5625 * 100 = 56.25 (este es nuestro porcentaje).

Funcionalidad

Seleccionar elementos fácilmente

Con la popularidad de una serie de bibliotecas de JavaScript (jQuery, por ejemplo), el comité ECMAScript y los estándares W3C tomaron nota de una de las piezas centrales de la funcionalidad que los desarrolladores no tenían de forma nativa: una buena selección de elementos. Los métodos como getElementByID () y getElementByClassName () eran rápidos pero no tan flexibles y robustos como los motores de selección provenientes de la comunidad de desarrolladores; querySelectorAll () era la forma en que el organismo de estándares imitaba parte de esa flexibilidad en un método selector nativo.

var items = document.querySelectorAll (’# header .item’);

querySelectorAll () se pueden pasar selectores múltiples y mixtos. Leer más sobre esto.

Creando nuevas matrices

Iterar sobre una matriz es algo que se vuelve tedioso de escribir. Escribir y reescribir bucles for () no es divertido. En la versión 1.6 de JS, el método map () aterrizó proporcionando soporte para una forma fácil de iterar y crear una nueva matriz a partir de otra.

var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var welcome = people.map (function (name) {
return ’Hola’ + nombre + ’!’;
});

Ejecutando este código, si tuviéramos que console.log (bienvenidos) verías bienvenidos es una nueva matriz ["¡Hola, Heather!", "¡Hola, James!", "¡Hola, Kari!", "¡Hola, Kevin!" ].

Limpiar documentos y objetos de ventana

Las bibliotecas de JavaScript de terceros tienden a interferir con los documentos nativos y los objetos de ventana. Esto puede ser un problema para otras bibliotecas de terceros y para el desarrollador que las incluye. Como cualquiera de las partes, asegúrese de trabajar con una versión limpia de ambos objetos creando una nueva instancia de ellos. La mejor manera de hacer esto es creando un elemento iframe, insertándolo en el DOM y almacenando las nuevas instancias de esos objetos.

var iframe = document.createElement ('iframe');
iframe.style.display = "ninguno";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Aunque ha habido grandes mejoras en la pila web, continuar completando y sofisticando nuestro paquete de tecnología para cumplir con los desafíos que enfrentamos dentro del diseño, el estilo y la funcionalidad de nuestro proyecto sigue siendo de gran importancia. Para mantener un buen ecosistema de crecimiento, debemos alentar a los organismos de normalización y los proveedores de navegadores a que continúen avanzando con nuevas especificaciones e implementaciones de funciones innovadoras mientras compartimos nuestro propio conocimiento con otros desarrolladores y diseñadores. Más información, menos hackeos.

Darcy Clarke es un desarrollador galardonado, cofundador de la empresa de temas de WordPress Themify y el agregador de ofertas diarias DealPage, y miembro del equipo jQuery. Trabaja en Polar Mobile como desarrollador senior de UX.