[6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos

LMSGI-Unidad 5-CSSJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

[6]bases del funcionamiento

de CSSLMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red


@jorgesancheznet

[6.1] introducción a CSS

LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red


@jorgesancheznet

Ejemplo de mal HTML, etiqueta font

• <font face=“Arial” color=“red”>Texto</font>


@jorgesancheznet

limitaciones de HTML

•No es fácil armonizar semántica y formato en un solo lenguaje•HTML, hoy en día, es puramente semántico•Es más fácil de mantener un sitio web si el contenido y el formato se independizan•No es un lenguaje pensado para dar formato, está pensado para ser simple


@jorgesancheznet

Funcionamiento más apropiado

•HTMLDescripción de elementos

•CSSCómo se deben presentar esos elementos en pantalla


@jorgesancheznet

[6.2] versiones de CSS

LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red


@jorgesancheznet

Versiones CSS

•CSS1 (1996)• Formatos de texto, párrafo, caja, lista, tamaños de imágenes,-

•CSS2 (1998) y CSS 2.1• Posicionamiento, tipos de medio

•CSS3 (actual)• http://www.w3.org/Style/CSS/current-work• 30 módulos en trabajo, estándar vivo (parte de HTML5)


@jorgesancheznet


@jorgesancheznet

Proceso de estandarización

first publicworking draftt WORKING

DRAFTCANDIDATE

RECOMMENDATIONlast call PROPOSAL

RECOMMENDATION

RECOMMENDATIONRESCINDED

RECOMMENDATION

ABANDONEDRECOMMENDATION


@jorgesancheznet

Compatibilidad

•http://caniuse.com (uso de CSS3 en los navegadores)•http://css3test.com (compatibilidad de mi navegador)


@jorgesancheznet


@jorgesancheznet

Prefijos

•Las nuevas propiedades (sin compatibilidad) a veces usan prefijos:• -moz-Mozilla• -webkit-Motor de Safari, Chrome y (ahora) Opera• -ms-Microsoft• -o-Versiones anteriores de Opera


@jorgesancheznet

Prefijos para nuevas propiedades.Propiedades prefijadas

div{-moz-columns:3;-webkit-columns:3;columns:3;

}


@jorgesancheznet

Navegadores para probar nuevas características

•Chrome Canaryhttps://www.google.es/chrome/browser/canary.html•Firefox: • Nightly (primeras pruebas de características)• Developer Edition (más estable, para desarrolladores)• Beta (Más cerca del Firefox normal)• https://www.mozilla.org/en-US/firefox/channel/desktop/

Documents

[6] bases del funcionamiento de CSS - Jorge Sanchezjorgesanchez.net/presentaciones/lenguajes-de-marcas/css/introducci… · LMSGI-Unidad 5-CSS Jorge Sánchez, @jorgesancheznet Prefijos