Habilitar compatibilidad con CSS3 :: fuera del seudoelemento

Question

Me gustaría poder utilizar el seudoelemento ::outside, pero al parecer ninguno de los principales navegadores lo admite (basado en mis pruebas actuales).

¿Hay algún tipo de polyfill JS que habilite este selector? ¿O hay una buena técnica para simular esto?

Answer 1

Tiene razón: ningún navegador existente ha implementado ninguna de las nuevas funciones en el antiguo CSS3 Generated and Replaced Content module, por lo que no podrá probar los pseudo-elementos propuestos. De hecho, están planeando reescribir el módulo en sí, por lo que el borrador actual se debe considerar abandonado, y desafortunadamente no se sabe el destino de estas características propuestas.

De todos modos, tampoco conozco ningún polyfill JS disponible para estos pseudo-elementos, por lo que no tiene suerte al escribir selectores usando ::outside en su CSS.

Lo más parecido que se puede conseguir es envolver elementos reales alrededor de los elementos para los que desea diseñar con un contenedor ... esto se realiza de manera económica con, por ejemplo, jQuery's .wrap() o .

Así, en lugar de hacer esto:

p::outside { 
    display: block; 
    border: 3px solid #00f; 
} 

Harías esto:

$('p').wrap('<div class="outside-p" />'); 

/* 
* Notice that you can't select only .outside-p that contains p:only-child, 
* so you'll have to come up with esoteric class names. 
*/ 
.outside-p { 
    border: 3px solid #00f; 
} 

jsFiddle preview

hay algunas advertencias a esto, sin embargo:

• Esto depende en gran medida del DOM; no podrá envolver ciertos elementos alrededor de otros dependiendo de las circunstancias. Incluso si puede, esos elementos de envoltura pueden terminar interfiriendo con el comportamiento o incluso el diseño de los elementos primarios reales.

  Por ejemplo, se le impide utilizar el selector de niño en casos como éste:

  article > p 
  

  donde va a jQuery.wrap() esos p elementos, como entonces los elementos de envoltura se rompa la relación padre-hijo entre article y p.

• La especificación establece que ::outside pseudo-elementos, como ::before y ::after, se supone que para heredar estilos de los elementos que los generan. Si usa JavaScript/jQuery para agregar contenedores, esos contenedores heredarán estilos de sus elementos principales y no de los que están envolviendo. Esto nunca ha sido un problema al polifilling ::before y ::after, ya que están destinados a insertarse como elementos secundarios de todos modos, siguiendo normalmente las reglas de herencia.

Answer 2

finalmente he añadido este fragmento a mi página:

$('ol > li').each(function(){ 
     var $this = $(this); 
     var $content = $($this.contents()); 
     $content.wrapAll('<p class="liwrap"/>'); 
    }); 

Esto añade una p dentro del li, lo que evita el problema de romper selectores de hijos, y que requieren nombres esotéricos para las clases (porque no hay sin selector de padres). También evita los problemas de no heredar estilos, porque el ::outside se puede reemplazar por un ::before.

Para lograr el efecto visual correcto, sin embargo, se necesita un margen negativo para elevar el p interno al nivel del contenido generado.

Answer 3

Parece que está usando jQuery, y en cuyo caso, sugeriría una pequeña modificación en el código de

$('ol > li').wrapInner("<p class='liwrap' />"); 

Es un poco más limpio y más fácil de seguir, sin tantas variables o llamadas a funciones.

Editar: Como asombro señala con razón, esta es una solución de optimización de los cuales Marcins ...

añade ap dentro de la li, lo que evita el problema de romper selectores de hijos