body * {overflow: hidden }

[metacortex]

Estoy maquetando una página y se me ocurrió colocar:

Código CSS:

body * {
  overflow: hidden;
}
 

Mi pueblo, el estilo hace milagros, incluyendo algunos aspectos de ie6. En síntesis se obtiene aún más control sobre los elementos (pero bastante más control).

En realidad esto es lo que tengo en la primera línea de la hoja:

Código CSS:

* {
  margin: 0;
  padding: 0;
}
 
body * {
  overflow: hidden;
}
 

Cuando vayan a maquetar pruébenlo, aunque sea por curiosidad. Luego me comentan qué tal les fue.

Si acaso existen puntos en contra, aún no me he tropezado con éstos en lo poco que llevo aplicando el método, pero hasta ahora todo va excelente.

[alexk]

emmm.... es un poco atrevido...
ya que en x circunstancias nos podrian resultar un poco complicadas..
por ejemplo... en posiciones abosolutas con left, top, etc... negativos...
o el scroll en los textarea.
seria interesante investigar a que elemento aplica el haslayout...
aparte de forzar las dimensiones a los elementos (y tener cuidado con los elementos en linea que heredan line-height con height:auto y limpiar los floats claro....
como un *{height:1%;} o un *{position:relative;} o mejor el *{zoom:1;} (pero este ultimo invalida) tambien nos sacan del apuro pero aveces pueden salirse un poco de control las cosas...
Igual no se pierde nada con probar... gracias por el aporte!!!

[Carlangueitor]

Básicamente es agregar una propiedad más de reset, pero en verdad que ayuda mucho, no se por que nadie más lo ha puesto. Lo que uno descubre trabajando

Yo encuentro algo, pero es por la forma en que reseteas, el usar el asterisco carga más al procesador, lo mejor sería hacer algo así, que puede ser modificado dependiendo de las necesidades del sitio.

Código CSS:

html, body, div, span, table, caption,  
tbody, tfoot, thead, tr, th, td, del, dfn, 
em, font, img, small, strike, strong, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,  
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend { 
    border: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative; /*agregando para corregir algunos fallos en IE6*/
    }
 

Aún se debería agregar algunas más para minimizar más las diferencias pero con este ya tienes una buena parte.

PD: Deberíamos hacer nuestro propio reset de Foros del Web

Saludos

[abimaelrc]

Lo que entiendo, no es que cargue más el procesador (puede ser), es que hay elementos que no requieren los estilos indicadas y el * asigna a todos los elementos el estilo que estoy indicando. Lo mejor es especificar que corresponde a que elemento, ejemplo lean este articulo específicamente este comentario.

[alexk]

bueno en el reset que pones, almenos no suelo usarlo ya que no siempre se utilizar todas esas etiquetas pero bueno....

Código:

html, body, div, span, table, caption,  
tbody, tfoot, thead, tr, th, td, del, dfn, 
em, font, img, small, strike, strong, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,  
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend { 
    border: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative; /*agregando para corregir algunos fallos en IE6*/
    }

alli quitarias el scroll de la pagina por eso puso

Código:

body * {
  overflow: hidden;
}

para que no pase eso...

PD: Deberíamos hacer nuestro propio reset de Foros del Web

+1

-------------------------------------------------
abimaelrc
vamos si es una carga de procesador, pero muy minima es como color:white; envez de #FFF; una y otra vez claro que agota un poco pero no es para tanto...
y al usar un selector universal pues multiplica esto una y otra vez jeje... aun que por comodidad prefiero usarlo de esa manera.

[Carlangueitor]

Iniciado por abimaelrc

Lo que entiendo, no es que cargue más el procesador (puede ser), es que hay elementos que no requieren los estilos indicadas y el * asigna a todos los elementos el estilo que estoy indicando.

Claro, además de aplicar estilos innecesarios, la carga aumenta.

Iniciado por alexk

bueno en el reset que pones, almenos no suelo usarlo ya que no siempre se utilizar todas esas etiquetas pero bueno....

Bueno, cualquier reset que utilices deberías adaptarlo dependiendo de las necesidades de tu sitio, por ejemplo en mi sitio tengo así (además de otras cosas):

Código CSS:

html, body, div, span, h1, h2, h3, p, pre, a, em, img, 
small, strike, strong, ul, li, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 14px;
    background: transparent;
    line-height: 1;
}
 

Lo tengo así por que ese sitio en especifico no necesitaba más, pero claro siempre cambia.

[abimaelrc]

@alexk, estoy de acuerdo, por eso indique puede ser, ya que siempre se va a cargar el procesador. Pero entiendo que el propósito principal es especificar que estilos corresponde a que elementos, más que por la carga. Pero repito tienes razón que aunque sea un micro-segundo debe aumentarse

[alexk]

Bueno, cualquier reset que utilices deberías adaptarlo dependiendo de las necesidades de tu sitio, por ejemplo en mi sitio tengo así (además de otras cosas):

pues si, en mi caso.. suelo usar una especie de "mini-framework"

Código CSS:

*{background:transparent;font:inherit;margin:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}
a img, .inp_txt, .inp_btn{border:0;}
.inp_txt{line-height:normal;}
.inp_btn, a span{cursor:pointer;}
ul li{list-style:none;}
.f_left{float:left;width:auto;}
.f_right{float:right;width:auto;}
.p_relative{position:relative;}
.p_absolute{position:absolute;}
.d_block{display:block;}
.d_inline, .f_left, .f_right{display:inline;}
.d_inline-b{display:inline-block;}
.d_none{display:none;}
.italic{font-style:italic;}
strong, .bold{font-weight:700;}
.txt_cen{text-align:center;}
.txt_lef{text-align:left;}
.txt_rig{text-align:right;}
.txt_may{text-transform:uppercase;}
a{text-decoration:none;}
h1, h2, h3, h4, h5, h6{font-weight:400;}
.ovw{overflow:hidden;}
.clr{clear:both;}
.divcen{margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
.w960px{width:960px;}
.w100{width:100%;}
.mgbot10px{margin-bottom:10px;}.
.white, .white a{color:#FFF;}
body, a, .black{color:#000;}
.fsz14px{font-size:14px;}
 

claro que va creciendo o cambiando segun el proyecto... pero normalmente este es el estandar... y me funciona de maravilla... y claro todo empezo con

Código CSS:

* { margin: 0; padding: 0;}
 

jeje... pero bueno... de gustos... los colores... nadie lo hace igual... es lo bonito del CSS... no hay una regla establecida...

[amx_kill]

una pregunta amigos ... esto es un "RESET"

Código CSS:

*{background:transparent;font:inherit;margin:0;padding:0;vertical-align:baseline;}
      :focus{outline:0;}
      a img, .inp_txt, .inp_btn{border:0;}
      .inp_txt{line-height:normal;}
      .inp_btn, a span{cursor:pointer;}
      ul li{list-style:none;}
      .f_left{float:left;width:auto;}
      .f_right{float:right;width:auto;}
      .p_relative{position:relative;}
      .p_absolute{position:absolute;}
      .d_block{display:block;}
      .d_inline, .f_left, .f_right{display:inline;}
      .d_inline-b{display:inline-block;}
      .d_none{display:none;}
      .italic{font-style:italic;}
      strong, .bold{font-weight:700;}
      .txt_cen{text-align:center;}
      .txt_lef{text-align:left;}
      .txt_rig{text-align:right;}
      .txt_may{text-transform:uppercase;}
      a{text-decoration:none;}
      h1, h2, h3, h4, h5, h6{font-weight:400;}
      .ovw{overflow:hidden;}
      .clr{clear:both;}
      .divcen{margin:0 auto;}
      table{border-collapse:collapse;border-spacing:0;}
      .w960px{width:960px;}
      .w100{width:100%;}
      .mgbot10px{margin-bottom:10px;}.
      .white, .white a{color:#FFF;}
      body, a, .black{color:#000;}
      .fsz14px{font-size:14px;}
 

[Carlangueitor]

A migo, viendo tus mensajes (en este tema y el otro), parece que no tienes ni idea de CSS, lo mejor es que empieces con eso: www.librosweb.es

Y como dijo el compañero Alexk, se trata de un miniframework.

[amx_kill]

@Carlangueitor se nota que sabes mas que yo.. me das una mano con mi problema... :(

[alexk]

amx_kill
se paciente... que hacerle la pelota a todo FW no conseguiras ayuda... si aun no te responden es que o no han visto el mensaje o no les apetece... ya que no es una obligacion perdona por decirlo asi pero es lo que hay... no ensuciemos el bonito hilo que hay aqui que promete...

[metacortex]

Iniciado por abimaelrc

Lo que entiendo, no es que cargue más el procesador (puede ser), es que hay elementos que no requieren los estilos indicadas y el * asigna a todos los elementos el estilo que estoy indicando. Lo mejor es especificar que corresponde a que elemento, ejemplo lean este articulo específicamente este comentario.

Completamente de acuerdo.

[abimaelrc]

Añado, sería bueno que FDW indique su propio reset. Ya como han indicado anteriormente CSS no tiene una regla/ley establecida.

Edito:
Pero antes de añadirlo, que se defina cuál debe ser el que se sugiere. Bueno pero eso se debe hacer en otro hilo

[metacortex]

Iniciado por alexk

emmm.... es un poco atrevido...
ya que en x circunstancias nos podrian resultar un poco complicadas..
por ejemplo... en posiciones abosolutas con left, top, etc... negativos...
o el scroll en los textarea.
seria interesante investigar a que elemento aplica el haslayout...
aparte de forzar las dimensiones a los elementos (y tener cuidado con los elementos en linea que heredan line-height con height:auto y limpiar los floats claro....
como un *{height:1%;} o un *{position:relative;} o mejor el *{zoom:1;} (pero este ultimo invalida) tambien nos sacan del apuro pero aveces pueden salirse un poco de control las cosas...
Igual no se pierde nada con probar... gracias por el aporte!!!

Te entiendo, y desde dicho enfoque quizás debamos verlo de esta manera: ¿Qué tipo de overflow conviene tener de forma predeterminada en X proyecto que estemos desarrollando?. Porque eso precisamente hace la propuesta inicial: imponer el hidden como overflow predeterminado y -en consecuencia- cambiar radicalmente el comportamiento de todos los elementos. A esta hora ya tengo un día maquetando y me ha ido de perlas .

Y bueno, cada vez estoy más convencido de que es mejor agregar overflow: visible, auto o scroll cuando sea necesario a casos individuales, mientras mantengo el hidden como propiedad global. De hecho hasta ahora pienso que es menos trabajoso (considerando los beneficios que reporta el hidden por defecto). Quizás convenga algo como esto:

Código CSS:

* {
  margin: 0;
  padding: 0;
}
 
body * {
  overflow: hidden;
}
 
pre {
  overflow: auto; /* Con esto se acomodan todos los pre */
}
 
.visible {
  overflow: visible;
}
 

De esta forma contamos con overflow:visible para ciertos elementos. Por ejemplo, si queremos que la capa .cosa tenga esta propiedad colocamos:

Código HTML:

<ul class="cosa visible">
...
 

Lo bueno es que esto es compatible con todos los navegadores .

[alexk]

exacto... de hecho ayer... empeze con otro proyecto y aplique el truco y especifique como mencionas, y ya ta agregado al "mini-framework" jeje...

Código CSS:

body *{overflow:hidden;}
.ovw_a{overflow:auto;}