Embedded Files
RTL BACKGROUND IMAGE POSITION
--------------------------------------
background-position: left top; /* same as 0% 0% */
background-position: left center; /* same as 0% 50% */
background-position: left bottom; /* same as 0% 100% */
background-position: right top; /* same as 100% 0% */
background-position: right center; /* same as 100% 50% */
background-position: right bottom; /* same as 100% 100% */
background-position: center top; /* same as 50% 0% */
background-position: center center; /* same as 50% 50% */
background-position: center bottom; /* same as 50% 100% */
http://reference.sitepoint.com/css/background-position
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CSS3:
http://www.w3.org/TR/css3-background/
background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;
http://www.sitepoint.com/new-properties-and-values-in-backgrounds-with-css3/#fbid=MY4BwyZ3sDa
When 2 values are set the first is assumed to be the horizontal and the second vertical, unless the keywords say otherwise. When only one is set the second is assumed to be center.
% and length represent an offset from the top-left corner, however if 3 or 4 values are given then % or length is offset from keyword
body {
background-position: bottom 10px right 20%;
}
++++++++++++++++++++++++++++++++++++
SECOND-CHILD AND SO ON.........
---------------------------------------------
For IE 7 & 8 (and other browsers without CSS3 support not including IE6) you can use the following to get the 2nd and 3rd children:
2nd Child:
td:first-child + td
3rd Child:
td:first-child + td + td
Then simply add another + td for each additional child you wish to select.
If you want to support IE6 that can be done too! You simply need to use a little javascript (jQuery in this example):
$(function() {
$('td:first-child').addClass("firstChild");
$(".table-class tr").each(function() {
$(this).find('td:eq(1)').addClass("secondChild");
$(this).find('td:eq(2)').addClass("thirdChild");
});
});
Then in your css you simply use those class selectors to make whatever changes you like:
table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }
FONT SIZE AND LINE-HEIGHT
.............................
20% of font-size + font-size
display:list-item;
works on non-list elements, div, p
** IE 6/7 accepts the value only on elements with a natural display: inline;
Media query
/* Landscape */
@media screen and (min-aspect-ratio: 1/1) {
html { background-color: green; }
img { height: auto; width: 100%; }
}
/* Portrait */
@media screen and (max-aspect-ratio: 1/1) {
html { background-color: red; }
img { height: 100%; width: auto; }
}
+++++++++++++++++++++++++++++++++
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
test media device:
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
check aspect ratio:
http://jsfiddle.net/ansonhoyt/JPpzb/3/
+++++++++++++++++++++++++++++++++++
IE conditional comments:
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Or for specific IE:
<!--[if IE6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
IE hacks:
.class {
width:200px; /* All browsers */
*width:250px; /* IE */
_width:300px; /* IE6 */
.width:200px; /* IE7 */
}
Or:
* html {} all ie
Opera
@media all and (min-width: 0px){
.classname {}
}
Safari
html:lang(en)>body .classname {}
Google Chrome
body:nth-of-type(1) p{
color: #333333;
}
http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques
Page updated
Google Sites
Report abuse