sirve - Funciones ocultas de CSS
src html (27)
Definitivamente he recogido algunos consejos útiles en las preguntas ocultas sobre el estilo de las funciones relacionadas con PHP y XHTML.
Así que aquí hay uno para cubrir CSS. Aunque es fácil de aprender, lleva un tiempo aprender todo, sus comportamientos predeterminados, propiedades, etc.
Aquí hay algunos para comenzar la pelota
@charset "UTF-8"; /* set the character set. must be first line as Gumbo points out in comments */
.element {
/* takes precedence over other stylings */
display: block !important;
/* mozilla .... rounded corners with no images */
-moz-border-radius: 10px;
/* webkit equivalent */
-webkit-border-radius: 10px
}
Estos no están tan ocultos , pero su uso no está muy extendido. ¿Qué consejos, trucos y características raras has descubierto con CSS?
Actualmente solo para WebKit pero bastante interesante: CSS Animations
Alternativa de float entre navegadores (IE6 +, FF, Safari):
.inline-block {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline; }
Aplique estilos / clases múltiples a un elemento como esta class="bold red GoldBg"
<html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>
Asignaciones en línea @media:
/* Styles.css */
.foo { ... bar ... }
...
@media print{
.ads{display:none}
}
Para que pueda deshacerse de otra solicitud HTTP.
Echa un vistazo a las transformaciones CSS de Webkit, por ejemplo, -webkit-transform: rotate(9deg);
El ajuste de la palabra se puede hacer fácilmente usando css, sin ninguna ayuda de la tecnología del lado del servidor.
word-wrap: break-word;
El bloque en línea cruzado funciona en bloque y elementos en línea usando las declaraciones combinadas:
.column {
-moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top;
}
para navegadores estándar, incluido Firefox 2, y:
.ie_lte7 .column { display:inline; }
El hecho de que float un elemento padre hará que se expanda para contener todos sus elementos float .
El material de radio de borde es parte de la especificación de CSS3. Como CSS3 todavía no está completamente terminado, los navegadores más progresistas, mientras tanto, implementan partes de él con sus propias propiedades (-moz, -webkit). Así que ya podemos disfrutar de esquinas redondeadas, codificadas limpiamente en CSS puro.
Desafortunadamente, el otro gran jugador en el mercado de los navegadores aún no muestra señales de implementar las características de css3.
La semana pasada encontré una propiedad CSS increíblemente útil de la que nunca había oído hablar:
text-rendering: optimizeLegibility;
Safari, Chrome y Firefox todos entienden esta propiedad, y cuando se configura, habilita el kerning y ligaduras avanzados. Aquí hay una gran demostración .
Los pseudo-elementos : antes y después
La siguiente regla hace que la cadena "Capítulo:" se genere antes de cada elemento H1:
H1:before {
content: "Chapter: ";
display: inline;
}
Para más información, http://www.w3.org/TR/CSS2/generate.html
Mis unos son:
- todas las propiedades de las hojas aurales como
azimuth,pitch... - algunas propiedades del módulo de impresión como
page-break-after: avoid; -
counter-increment: section 1; -
border-collapse: collapse; -
background-color: transparent; -
outline: 1px solid...
No es realmente "oculto", pero comprender el modelo de caja y el modelo de posicionamiento será de gran ayuda.
Me gusta, sabiendo que una position: absolute elemento position: absolute está ubicado en relación con su primer elemento primario que tiene un estilo con position: relative .
No es realmente una característica, pero útil, no obstante: el selector de elementos secundarios funciona en todos los navegadores, excepto en IE6, lo que le permite aislar IE6 sin utilizar hacks o hojas de estilo condicionales o invalidar su código. Por lo tanto, el enlace en el siguiente código será rojo en IE6, azul en cada otro navegador.
CSS
/*Red for IE6*/
.link {color:#F00;}
/*Blue for everything else*/
#content>.link {color:#00F;}
HTML
<div id="content">
<a class="link" href="#">Link</a>
</div>
Aquí hay una lista de selectores (para CSS2) y un cuadro de compatibilidad del navegador .
No tanto las características ocultas, sino una pregunta con consejos de CSS que todo desarrollador principiante debería conocer
No tengo idea si esta es una función oculta, pero me sorprendió ver esto: http://www.romancortes.com/blog/css-3d-meninas/
Nunca he pensado que usando la propiedad css ''border'' pueda hacer un triángulo de formas diferentes. Aquí está el enlace para ir,
(editar) El siguiente enlace ya no funciona. http://www.dinnermint.org/blog/css/creating-triangles-in-css/
A partir de ahora, puede intentar lo siguiente, http://jonrohan.me/guide/css/creating-triangles-in-css/
Otro selector de IE6
* html .something
{
color:red;
}
Solución de errores de representación aleatoria de IE6: aplique el zoom: 1, que activará el diseño .
Podemos mostrar la etiqueta de estilo como un elemento de bloque y editar CSS dinámicamente utilizando el atributo content content HTML5. Demostración aquí.
<body>
<style contenteditable>
style {
display: block;
}
body {
background: #FEA;
}
</style>
</body>
Créditos: CSS-Tricks
Posiblemente márgenes negativos y elementos de posición absoluta en elementos de posición relativa .
¿ Ves cómo lo harías con CSS? por ejemplo.
Puede crear áreas de desplazamiento sin recurrir a marcos mediante la propiedad de desbordamiento de CSS. Ejemplo:
div.foo {
border: 1px solid;
width: 300px;
height: 300px;
overflow: auto;
}
overflow: auto significa que si el contenido no cabe en el div, aparecerán barras de desplazamiento horizontales y / o verticales según sea necesario.
overflow: scroll significa que ambas barras de desplazamiento siempre estarán presentes. Si solo quiere que una barra de desplazamiento siempre esté presente, use overflow-x o overflow-y (que son compatibles con los navegadores modernos e IE6).
Algunos de ustedes pueden estar pensando "duuuh", pero me sorprendió saber que las áreas de desplazamiento se pueden crear sin marcos.
Puede establecer un ancho variable para un elemento absolutamente posicionado al especificar las propiedades left y right . Esto le da más control que simplemente establecer el width en un porcentaje.
Por ejemplo:
#myElement {
position: absolute;
left: 5px;
right: 10px;
}
Un ejemplo alternativo
#myElement{ /* fill up the whole space :) */
background: red;
position:absolute;
left: 0;
right:0;
top: 0;
bottom: 0;
}
Puede mostrar el elemento de title del documento:
head, title {
display: block;
}
Realmente me gustan los sprites de CSS.
En lugar de tener 20 imágenes para todos los botones y logotipos de su sitio (y, por lo tanto, 20 solicitudes http con la latencia alrededor de cada una), simplemente use una imagen y colóquela cada vez para que solo el bit que desea esté visible.
Es difícil publicar un ejemplo, ya que necesitaría ver la imagen del componente y el CSS de ubicación, pero publiqué en el blog el uso de Google aquí: http://www.stevefenton.co.uk/Content/Blog/Date/ 200905 / Blog / Google-Uses-Image-Sprites /
bloques en línea (alternativa a los divs flotantes):
.inline_block
{
display:-moz-inline-box;
display:inline-block;
}
¡No aplique esta clase a un div! no funcionará! aplicarlo a un lapso (o un elemento en línea)
<span class="inline_block">
</span>
PNG transparente en IE6 Esto corrige la transparencia PNG en IE6. Establezca el fondo como no e incluya la imagen en el filtro. No es necesario ningún javascript o htc.
.whatever {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=''vehicles.png'');
}
Establece el comportamiento de salto de página después de un elemento: navegador cruzado
table {
page-break-after:always
}
Puede usar las propiedades siempre, evitar, automático, izquierda, derecha, inherente. Lea documentos en http://www.w3schools.com/CSS/pr_print_pageba.asp
Una forma de numerar secciones y subsecciones con "Sección 1", "1.1", "1.2", etc. - Navegador cruzado
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
http://www.w3schools.com/CSS/pr_gen_counter-increment.asp
Contraer los bordes de la tabla en un solo borde o separado como en HTML estándar - Navegador cruzado
table
{
border-collapse:collapse;
}
http://www.w3schools.com/css/pr_tab_border-collapse.asp
Elimine la selección Borde o línea de puntos del botón o campos de entrada. Tiene otros grandes usos: Cross browser
button{
outline:0;
}
http://www.w3schools.com/CSS/pr_outline.asp
* html para 100% de altura en IE6
* html .move{
height:100%;
}
Permita que las palabras largas se rompan y se envuelvan en la línea siguiente - CSS3 Cross browser
.whatever {
word-wrap:break-word;
}
http://www.w3schools.com/css3/css3_pr_word-wrap.asp
Shorthands
antes de
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif
Después
font: 1em/1.5em bold italic serif;
antes de
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Después
background: #fff url(image.gif) no-repeat top left;
antes de
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)
Después
list-style: disc outside url(something.gif);
antes de
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
Después
margin:2px 1px 3px 4px; /*also works for padding*/
margin:0; /*You can also do this for all 0 borders*/
margin:2px 3px 5px; /* you can do this for top 2px, left/right 3px, bottom 5px and ;
.class {
/* red for chrome, ff, safari, opera */
background-color: red;
/* green for IE6 */
.background-color: green;
/* blue for IE7+ */
_background-color: blue;
}
hará que su fondo <cualquiera> sea diferente en esas categorías de navegador