Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 8 de 8

Tema: problemas con los pseudo-elemento :first-line y :first-letter

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    132
    Poder de Reputación
    4

    problemas con los pseudo-elemento :first-line y :first-letter

    Hola gente a ver si alguien sabe que está pasando al el pseudo-elemento first-line y pseudo-elemento :first-letter porque me trae loco de la cabeza, os explico;

    Empiezo por :first-letter:

    Según http://librosweb.es/libro/css_avanza...elementos.html dice esto:

    El pseudo-elemento :first-letter permite seleccionar la primera letra de la primera línea de texto de un elemento. De esta forma, la siguiente regla CSS muestra en mayúsculas la primera letra del texto de cada párrafo:

    p:first-letter { text-transform: uppercase; }

    Los signos de puntuación y los caracteres como las comillas que se encuentran antes y después de la primera letra también se ven afectados por este pseudo-elemento.

    Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
    ------

    Ahora pongo este código y según en qué navegador hace una cosa u otra, firefox no aplica a la primera letra de la primera línea que sería el primer <p> del elemento <div > la propiedad color, google chrome hace lo mismo e intenet explorer desde la versión 8 -11 aplica el color perfectamente ¿ qué está pasando? Una curiosidad que probe, si pones antes del primer párrafo una letra por ejemplo, si funcionaria ahora el color.

    Código:

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento</title>
    <style type="text/css">
    div:first-letter {
    color:#FF0000;
    }
    p:first-letter {
    text-transform:uppercase;
    }
    -->
    </style>
    </head>
    <body>
    <div>
    <p>lorem ipsum dolor sit amet...</p>
    <p>lorem ipsum dolor sit amet...</p>
    <p>lorem ipsum dolor sit amet...</p>
    </div>
    </body>
    </html>

    Ahora :first-line :

    Según http://librosweb.es/libro/css_avanza...elementos.html dice esto y su ejemplo:

    El pseudo-elemento :first-line permite seleccionar la primera línea de texto de un elemento. Así, la siguiente regla CSS muestra en mayúsculas la primera línea de cada párrafo:

    p:first-line { text-transform: uppercase; }

    Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
    Se pueden combinar varios pseudo-elementos de tipo :first-line para crear efectos avanzados:

    div:first-line { color: red; }
    p:first-line { text-transform: uppercase; }

    <div>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    </div>

    En el ejemplo anterior, la primera línea del primer párrafo también es la primera línea del elemento <div>, por lo que se le aplican las dos reglas CSS y su texto se ve en mayúsculas y de color rojo.
    -------

    Antes de seguir con first-line encontre en la red que la propiedad text-transform: uppercase; en este pseudo-elemento first-line tiene un bug en google chrome y no funciona.

    Ahora pongo este código y según en qué navegador hace una cosa u otra, firefox no aplica a la primera línea del div que seria el primer <p> la propiedad color pero si aplica a la primer línea de cada párrafo las mayúsculas, google Chrome tampoco aplica a la primera línea del div que sería el primer <p> la propiedad color y tampoco las mayúsculas a cada párrafo, pero esa ya dije que lo leí por la red que es un bug muy antiguo de google crhome. Y intener explorer desde la versión 8-11 si aplica a la primera línea del div que sería el primer <p> tambien la propiedad color. ¿Qué está pasando porque es todo muy raro? La misma curiosidad, si pones antes del primer párrafo una letra por ejemplo si funcionaria ahora el color, igual que first-letter.

    Código:
    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento</title>
    <style type="text/css">
    div:first-line {
    color:#FF0000;
    }
    p:first-line {
    text-transform:uppercase;
    }
    -->
    </style>
    </head>
    <body>
    <div>
    <p>lorem ipsum dolor sit amet...</p>
    <p>lorem ipsum dolor sit amet...</p>
    <p>lorem ipsum dolor sit amet...</p>
    </div>
    </body>
    </html>

    Espero haberme explicado lo mejor posible

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    Hola!

    Sobre ::first-letter (con doble dos puntos es el estándar), eso ocurre, según la norma CSS, porque el div no tiene caracteres. Si tuviera, entonces podrías aplicar estilos distintos al div y al p. Lo que hace ::first-letter es buscar la primera letra de un elemento, pero en vista de que div no tiene letras, entonces no hay contenido donde aplicar los estilos.

    Lo mismo ocurre con ::first-line: se aplica al contenido directo del elemento, no de los hijos.

    Ten en cuenta que para los estilos CSS, los elementos sí importan. Nosotros (las personas) entendemos a qué nos referimos, pero los computadores son estructurados, por ende, si la información no está escrita como este espera, entonces no la entiende.

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    132
    Poder de Reputación
    4
    Hola!

    Sobre ::first-letter o ::first-line con los dos puntos si lo sabía, lo que pasa que intenet explorer 8 solo lo acepta con solo dos puntos y sigo dándole soporte a él . De todas formas los navegadores modernos aceptan la notación de : o ::

    A ver si me situó y entiendo lo que quieres decirme:

    ¿Lo que quieres decir con Sobre ::first-letter y ::first-line es que los estilos se aplican al contenido directo del elemento, no de los hijos?
    Si es así, entendería porque no se me aplicaban estilos en los ejemplos que puse, en el link que copie de libros web pone esto y fijate lo que marco en negrita:

    El pseudo-elemento :first-line permite seleccionar la primera línea de texto de un elemento. Así, la siguiente regla CSS muestra en mayúsculas la primera línea de cada párrafo:

    p:first-line { text-transform: uppercase; }

    Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
    Se pueden combinar varios pseudo-elementos de tipo :first-line para crear efectos avanzados:

    div:first-line { color: red; }
    p:first-line { text-transform: uppercase; }

    <div>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    </div>

    En el ejemplo anterior, la primera línea del primer párrafo también es la primera línea del elemento <div>, por lo que se le aplican las dos reglas CSS y su texto se ve en mayúsculas y de color rojo.

    Lo vez pone que “la primera línea del primer párrafo también es la primera línea del elemento <div>” y encima intenet explorer todas las versiones si aplica estilos a esa primera línea del elemento div que sería el primer <p> pues mas lio tenia.

    ¿Esta equivodo librosweb? ¿porque intenert explorer en todas sus versiones si lo aplica entonces?

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    132
    Poder de Reputación
    4
    capturada.jpg

    aqui te pongo una captura de pantalla de internet explorer 11 y mira como lo aplica a esa primera linea del div es decir, al primer parrafo, pero lo curioso que en la hoja de estilos sale como tachado ese estilo

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    No es que librosweb esté equivocado, sino que IE es quién mal interpreta el contenido. Lo correcto es que sólo se apliquen los estilos al texto directo de la etiqueta|clase|id al cual se le aplicaron. Por esta razón, entre otras, es que siempre recomiendo hacer la vista previa en los navegadores más utilizados, no sólo en IE. Si el escritor de librosweb hubiese hecho las pruebas en otros navegadores, se hubiera dado cuenta que las reglas no funcionan en todos igual.

    Si tomas en cuenta el estándar CSS, usando tu ejemplo, el div no tiene líneas, sino hijos. Una etiqueta no necesariamente contiene texto, por eso es que sólo se aplica al contenido directo y no a los hijos.

    IE procesa más contenido que los demás navegadores, pues además de verificar que el elemento tenga texto directamente bajo él, debe verificar los hijos hasta encontrar la primera línea con texto (que podría ser después de N elementos).

    En resumen, la regla es lo que dice:

    first-letter: se aplica sólo al texto de la primera letra del elemento directo.
    first-line: se aplica sólo a la primera línea de texto del elemento directo, no de los sub-elementos.

    Recuerda que todos los elementos que soporten texto tienen un sub-nodo llamado text. Este nodo no es literal, o sea, uno no lo escribe como <p><text>Lorem....</text></p>, pero para el navegador sí existe.

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    132
    Poder de Reputación
    4
    Hola de nuevo muchas gracias por tu clara explicación perfecto ahora comprendo todo mucho mejor. Solo me han quedado dos dudas, si puedes aclarármelas.

    Cuando comentaste esto:
    En resumen, la regla es lo que dice:

    first-letter: se aplica sólo al texto de la primera letra del elemento directo.
    first-line: se aplica sólo a la primera línea de texto del elemento directo, no de los sub-elementos.

    Se podría decir también con first-letter esto:
    :first-letter se aplica sólo a la primera letra de la primera línea de texto del elemento directo, no de los sub-elementos.
    ¿Sería lo mismo verdad?

    Y lo otro si puedes explicarme un poco esto que escribiste y que tiene que ver con el tema:

    Recuerda que todos los elementos que soporten texto tienen un sub-nodo llamado text. Este nodo no es literal, o sea, uno no lo escribe como <p><text>Lorem....</text></p>, pero para el navegador sí existe.

  7. #7
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    En resumen, la regla es lo que dice:

    first-letter: se aplica sólo al texto de la primera letra del elemento directo.
    first-line: se aplica sólo a la primera línea de texto del elemento directo, no de los sub-elementos.

    Se podría decir también con first-letter esto:
    :first-letter se aplica sólo a la primera letra de la primera línea de texto del elemento directo, no de los sub-elementos.
    ¿Sería lo mismo verdad?
    Eso mismo, pero aplicado a los nodos de texto, nada más :P (lee lo que sigue).

    Y lo otro si puedes explicarme un poco esto que escribiste y que tiene que ver con el tema:

    Recuerda que todos los elementos que soporten texto tienen un sub-nodo llamado text. Este nodo no es literal, o sea, uno no lo escribe como <p><text>Lorem....</text></p>, pero para el navegador sí existe.
    ¿Qué es un nodo?

    En el contexto HTML (en otros contextos significa algo similar, pero representa otras cosas), y de los documentos en general, un nodo define la estructura del documento y los nombres de cada uno de los elementos y atributos. Para no complicarse, un nodo, en este caso, es simplemente cualquier elemento HTML, incluyendo los atributos (id, class, name, type, etc.) y las etiquetas de cierre/apertura de cada elemento.

    Ahora, un nodo de texto es simplemente eso: un texto dentro de un elemento X (donde X puede ser un div, p u otro).

    En el siguiente ejemplo, el texto es el nodo de texto:

    Código:
    <p class="test">Lorem ipsum dolor...</p>
    También están los nodos p y el sub-nodo class. El uso más común, sin usar librerías, es a través de Javascript con createTextNode:

    Código:
    var element = document.createElement('div');
    var text = document.createTextNode('Lorem ipsum...');
    element.appendChild(text);
    Que crearía una estructura así:

    Código HTML:
    <div>
        Lorem ipsum...
    </div>
    Lo puedes añadir a cualquier otro elemento, no solo a uno creado a través de JS.

    jQuery lo hace aún más evidente al proporcionar una función llamada text (asumiendo que el elemento tenga texto):

    Código:
    jQuery('#un-elemento').text;
    Hay más formas de acceder a este "pseudo" elemento, como la consola del navegador (console.log(jQuery('#un-elemento'))).

    Espero que me haya explicado bien :P

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 abr, 15
    Mensajes
    132
    Poder de Reputación
    4
    muchas gracias skaparate todo entendido :)

Temas Similares

  1. Problemas con los elemento de la carpeta objetos en internet.
    Por Antonio Miguel en el foro Foro General
    Respuestas: 4
    Último Mensaje: 19/03/2011, 08:15
  2. ayuda new letter
    Por dj_ch-elo@hotmail.com en el foro Foro General
    Respuestas: 1
    Último Mensaje: 27/02/2009, 18:58
  3. ayuda con un new letter
    Por dj_ch-elo@hotmail.com en el foro Foros
    Respuestas: 1
    Último Mensaje: 27/02/2009, 14:03

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •