Con Windows 8, usted tiene una elección sin precedentes de los dispositivos para navegar por la Web, de las pantallas de escritorio grandes pizarras pequeñas. Con el fin de dar cabida a esta amplia gama de dispositivos, el navegador debe ser capaz de escalar y el diseño de la Web en muchos diferentes tamaños de pantalla y dimensiones. Hemos ya escribió en su blog acerca de alguna de las características de IE que soportan estos escenarios. sub-pixel de posicionamiento (de texto y el diseño) es una de las principales plataformas tecnológicas que permiten a las páginas Web para lucir bella y coherente a cualquier escala.
En este post, se describen los cambios realizados en IE10 para apoyar un mejor posicionamiento de sub-píxel a través de la CSS-OM.
Los desarrolladores Web pueden crear diseños hermosos a través de una variedad de tecnologías de la plataforma. En general, los desarrolladores pueden utilizar hojas de estilo CSS para describir el diseño de un sitio Web. En algunos casos, los desarrolladores web también dependen de código JavaScript para medir, alinear o colocar los elementos de una página Web con
pixel-perfect de precisión. Por ejemplo, algunos editores en línea coloque cuidadosamente una caja de edición exactamente sobre la parte superior de los contenidos existentes de forma que sólo aparece como si estuviera directamente editando el contenido existente. Escenarios como éste se puede utilizar el modelo de objetos CSS (CSS-OM) API para leer y / o establecer la posición del elemento. El CSS-OM es un conjunto de API de JavaScript para la manipulación de programación CSS. La medición y alineación de elementos de diseño utilizando el API de CSS-OM puede ser problemático debido a la forma redonda que los APIs o truncar sub-pixel los valores colocados a todo el pixel números.
Una nota rápida acerca de pixel-perfect Layouts
En general, pixel-perfect diseños en la Web tienden a entrar en conflicto con los objetivos de permitir a los contenidos accesibles, compatibles y adaptables, y por lo tanto no son una buena práctica. El collage siguiente ilustra algunos de los errores que pueden ocurrir cuando el diseñador Web de los intentos de crear un diseño de píxel perfecto, pero las diferencias inesperadas de la plataforma Web hacen que sus diseños a ir mal.
Ejemplos de píxeles perfectos diseños ido mal
Una Ilustración
Para ilustrar cómo la API de CSS-OM puede causar problemas sutiles de posición, considere un ejemplo sencillo. Sub-pixel posicionamiento permite cuatro cajas que se distribuye uniformemente en el interior del contenedor, a pesar de el tamaño del contenedor no sea divisible por cuatro.Considere el siguiente fragmento de código HTML de marcas:
<Pie de página>
<Div> Contenido 1 </ div> <div> Contenido 2 </ div> <div> Contenido 3 </ div> <div> el contenido de 4 </ div>
</ Pie de página>
Pie de página {width: 554px; border: 1px solid negro; text-align: center;}
div footer {display: inline-block, ancho: 25%;}
div pie de página: nth-hijo (aún) {background-color: red;}
div pie de página: nth-hijo (impar) {background-color: naranja;}
onload = function () {
footerBoxes var = document.querySelectorAll ("div pie de página");
var s = "";
var TotalSize = 0;
for (var i = 0; i <footerBoxes.length; i + +) {
/ / Informes
var = offsetWidth footerBoxes [i] offsetWidth.;
s + = "contenido" + (i + 1) + "offsetWidth =" + offsetWidth + "px" + "<br />";
TotalSize + = offsetWidth;
}
s + = "Total <i> calcula </ i> offsetWidth =" + TotalSize + "px" + "<br />";
s + = "width = Contenedor" + document.querySelector ("pie") clientWidth + "px" + "<br />".;
document.querySelector ("# mensaje") innerHTML = s.;
}
content 1 content 2 content 3 content 4 content 1 offsetWidth = 139
content 2 offsetWidth = 139
content 3 offsetWidth = 139
content 4 offsetWidth = 139
Total calculated offsetWidth = 556
Actual container width = 554 Tenga en cuenta que la suma de los valores devueltos por las CSS-OM API
offsetWidth resultados en el offsetWidth total calculado que difiere de la anchura real de contenedores de dos píxeles, debido al redondeo que se produce en el offsetWidth de los individuales div elementos. Los resultados en otros navegadores muestran una discrepancia similar, aunque a veces el total es menor que la real y una mayor veces.
Cuando el redondeo / truncamiento conduce a una suma total que desborde el tamaño del recipiente (como se ilustra), el contenido comenzará a envolver o causar no deseados de las barras de desplazamiento a aparecer. Además, muchos contenedores están dimensionados de acuerdo con el texto y la fuente utilizada para representar el texto, y las métricas de fuente puede ser diferente en todos los navegadores o las fuentes alternas pueden ser seleccionados si la fuente solicitada no está disponible.
El
offsetWidth API, junto con muchos otros ampliamente utilizado CSS-OM propiedades (la mayoría data de IE4 en 1997), proporcionan una manera conveniente y rápida para extraer los valores enteros de píxel de un elemento de una variedad de diferentes sistemas de coordenadas. Todos los principales navegadores poner en práctica la mayor parte de estas API de compatibilidad y que también forman parte de la CSS-OM Ver módulo, un proyecto de norma del W3C. Las nuevas características del navegador siguen demostrando el déficit de limitar CSS-OM propiedades de todo el valor de píxeles. Por ejemplo, algunas funcionalidades como SVG y CSS 2D / 3D transforma permitir que las dimensiones de un elemento a caer con facilidad entre los píxeles.
De abordar el problema
Reconociendo esta limitación (en parte), el W3C CSS-OM Ver especificaciones describen las coordenadas devuelto a través de lagetBoundingClientRect() API para floats , es decir, en valores que pueden representar una precisión sub-pixel. ( getBoundingClientRect() es otra API CSS-OM que proporciona un elemento delimitador de la caja de la posición y dimensión con el mismo origen que la offsetWidth API). En IE10 hemos actualizado la
getBoundingClientRect() API para volver sub-píxeles de resolución por defecto en el modo estándar IE10 para ser interoperable con otros navegadores y alinearse con el estándar W3C. Actualización de nuestro ejemplo anterior para reportar el
width los componentes del rectángulo devuelto por getBoundingClientRect() , IE10 informa ahora estos valores fraccionarios: content 1 content 2 content 3 content 4 content 1 offsetWidth = 139, getBoundingClientRect().width = 138.5
content 2 offsetWidth = 139, getBoundingClientRect().width = 138.5
content 3 offsetWidth = 139, getBoundingClientRect().width = 138.5
content 4 offsetWidth = 139, getBoundingClientRect().width = 138.5
Total calculated offsetWidth = 556
Total calculated getBoundingClientRect().width = 554
Actual container width = 554 Tomando Sub-pixel Valores en todas partes
Además de
getBoundingClientRect , que también informan de la posición de sub-píxel para los eventos de ratón / puntero en el modo estándar IE10 por defecto. Sólo es posible para el ratón / puntero a la tierra between píxeles cuando el factor de zoom se establece en un valor distinto de 100%. En concreto, el afectado ratón / puntero del API son: -
MouseEvent.offsetX/Y -
MouseEvent.layerX/Y -
MouseEvent.clientX/Y -
MouseEvent.pageX/Y -
MouseEvent.x/y
Para continuar con nuestro compromiso con la compatibilidad con las páginas web existentes (páginas que no estén preparados para manejar sub-pixel los valores de la CSS-OM en general), IE10 continúa con los informes de todo el valor de unidades de píxel de forma predeterminada para las otras propiedades de CSS-OM . Estas API son:
-
Element.clientHeight -
Element.clientWidth -
Element.clientLeft -
Element.clientTop -
Element.scrollTop -
Element.scrollLeft -
Element.scrollWidth -
Element.scrollHeight -
HTMLElement.offsetWidth -
HTMLElement.offsetHeight -
HTMLElement.offsetTop -
HTMLElement.offsetLeft -
TextRange.offsetLeft -
TextRange.offsetTop
document.msCSSOMElementFloatMetrics = true;
document.msCSSOMElementFloatMetrics de true , todas las API de CSS-OM en la lista anterior, se iniciará la presentación de informes en sus valores de precisión sub-pixel que reflejen con exactitud los cálculos utilizados internamente por el diseño y el motor de renderizado. Tenga en cuenta que JavaScript se convertirá en un 1,00 por lo que no siempre se puede ver un punto decimal en los valores devueltos. Volviendo a nuestro ejemplo y el establecimiento de
document.msCSSOMElementFloatMetrics de true resultados de esto en IE10: content 1 content 2 content 3 content 4 content 1 offsetWidth = 138.5, getBoundingClientRect().width = 138.5
content 2 offsetWidth = 138.5, getBoundingClientRect().width = 138.5
content 3 offsetWidth = 138.5, getBoundingClientRect().width = 138.5
content 4 offsetWidth = 138.5, getBoundingClientRect().width = 138.5
Total calculated offsetWidth = 554
Total calculated getBoundingClientRect().width = 554
Actual container width = 554 Tenga en cuenta los decimales en los valores devueltos por
offsetWidth y que todos coinciden ahora con los totales. Resumen
A veces es útil (y, en raras ocasiones, es necesario) para poder utilizar las propiedades CSS-OM para el cálculo de diseño de pixel-perfect. Cuando se utiliza el CSS-OM, tenga en cuenta las características de todo el píxel de información de los API. En el diseño de presentaciones, ya sea con CSS o las API de CSS-OM, asegúrese de dar cabida a unos pocos píxeles de tolerancia a fin de asegurar un sitio más sólida a través de múltiples navegadores y / o dispositivos.-Travis Leithead, Administrador de programas, Internet Explorer
Nota del editor: Actualización para corregir algunos errores tipográficos pocos.
