| View previous topic :: View next topic |
| Author |
Message |
musician
Enthusiastic Coder
Joined: 09 Feb 2009
Posts: 27
|
Let's post here all hacks for different browsers. I think that's good idea!..
Reply with quote
|
| |
|
|
musician
Enthusiastic Coder
Joined: 09 Feb 2009
Posts: 27
|
 Here is my small collection of hacks... I suggest it is the only beginning 
1. Box Model hack
Box Model hack is used to cope with an Internet Explorer problem where border and padding are included in width of an element
| Code: |
padding: 4em;
border: 1em solid red;
width: 30em;
width/**/:/**/25em; |
2. For Opera
| Code: |
@media all and (min-width: 0px) { /* only Opera */
body .foo {color: blue}
} |
3. Min-width and max-width: the maximal and minimal width of the block
IE does not understand these properties of css. Look on the hack for the block with id="wrapper":
A) The minimal width 750px
| Code: |
#wrapper {
min-width: 750px;
width:expression(document.body.clientWidth < 750? "750px": "auto" );}
|
B) The maximal width 1220px, minimal 750px
| Code: |
#wrapper {
min-width: 750px;
max-width: 1220px;
width:expression(document.body.clientWidth <750> 1220? "1220px" : "auto");} |
Min-height hack from Dustin Diez
| Code: |
elector {
min-height:500px;
height:auto! important;
height:500px;}
|
4. Simple selectors
It is not necessary to create separate css-files for different browsers if the difference in rendering is not too great. It is possible to use the following css-selectors in your basic css-file:
IE 6 and lower
IE 7 and lower
| Code: |
| *:first-child+html {} * html {} |
IE 7 only
| Code: |
| *:first-child+html {} |
IE 7 and normal browsers
Only normal browsers (not IE 7)
The opera of version 9 and lower
| Code: |
| html:first-child {} |
Example of use: Let us appoint for the selector #news .title only in IE7 some properties:
| Code: |
*:first-child+html #news .title {
/*your properties*/
} |
5. !important
IE 6 and < have problems with the identifier !important which is used when you need to announce some property to be ignored, even if that announcement appears after the current. An example:
| Code: |
<style>
p {
background: green !important; /* for normal browsers and IE>6 that property remains, because it is marked as important */
background: red; /* IE 6 and below uses this property, despite of !important */
} </style> |
6. @import "nonie.css" all;
IE 7 and below does not support selectors @import. Therefore it is possible to write css for normal browsers and to import it to yours css using
| Code: |
| @import "nonie.css" all; |
This hack works for IE versions 7 and lower, maybe isn't working in following versions of IE
7. body [class | = "page-body"]
| Code: |
<style>
p {
background: red; /* It is applicable to all browsers */
}
body [class | = "page-body"] p {
background: green; /* It is applicable to IE7 and to the majority of normal browsers, except Opera */
}
</style>
|
All above-named hacks use valid CSS. The following will allow you to solve a problem quickly, but will make CSS not valid.
8. Underlining and hyphen
If you put underlining "_" or the hyphen "-" before a property it will be perceived only IE versions 6 and lower.Example of use:
| Code: |
<style>
p {
background: red; /* It Is applicable to all browsers */
_background: green; /* It Is applicable to IE6 and lower */
}
</style> |
9. An asterisk
Works for IE7 and lower
| Code: |
<style>
p {
background: red; /* It Is applicable to all browsers */
*background: green; /* It Is applicable to IE6 and lower */
}
</style>
|
I shall remind, this hack uses not valid CSS and is not recommended to use.
10. a:link:visited, a:visited:link
According to standards, pseudo-classes :link and :visited are mutually excluded, in fact :link means not visited reference. Nevertheless, IE 7 and below will ignore these pseudo-classes if any another will appear below in the same selector. Example:
| Code: |
a:link:visited, a:visited:link {} /* Chooses the element a in IE7 and lower. */ |
11.> body
chooses the element body only in IE7.
12. html* {}
selecting all elements inside the html element. Only for IE7 and lower.
13. !important!
As we already know, IE dislike identifier !important. But IE understands identifier !important! (other browsers do not perceive such property). Works for IE7 and lower.
Let's do that collection full! [/i]
Last edited by musician on 16/02/09 14:18; edited 1 time in total
Reply with quote
|
| |
|
|
Den
Guest Programmer
| |
linx
New Programmer
Joined: 09 Feb 2009
Posts: 11
|
Does anybody knows any Safari CSS Hack that actually works?
It should be visible only by Safari.
I know couple that you can hide some rules from Safari but I need one specific to target only Safari browser.
Any ideas?
_________________
...and justice for all...
Reply with quote
|
| |
|
|
musician
Enthusiastic Coder
Joined: 09 Feb 2009
Posts: 27
|
I looked for a special Safari hack and found out that valid CSS hack:
| Code: |
[b]Safari only[/b]
body:first-of-type {}
body:first-of-type #eydiv {text-align:left;} |
Reply with quote
|
| |
|
|
musician
Enthusiastic Coder
Joined: 09 Feb 2009
Posts: 27
|
Here is one more hack but some browsers don't work with him. In your stylesheet, if you place the pound sign (#) after a semi-colon ( , all styles within those brackets and thereafter will be ignored in Safari. If you are using Safari the background of the box below will be green, otherwise it will be red.Here is HTML code:
| Code: |
<div>
<p>The background color of this box will appear
green in Safari and red in other browsers.</p>
</div>
|
Here is what the CSS code looks like
| Code: |
#testBox{
background:#063
}
#testBox{
// Safari won't read the next line
// because of the floating pound sign
background:#c00;
#
}
|
Reply with quote
|
| |
|
|
linx
New Programmer
Joined: 09 Feb 2009
Posts: 11
|
musician, when I added the code you suggested, it worked! But, I went to retest in Firefox and noticed that it effected my positioning there. Any thoughts?
| Code: |
in styles.css I have:
#nav {
position:absolute;
top:55px;
left:382px;}
#main {
position:absolute;
left:508px;
top:43px;
width:223px} |
in safari3.css I have:
| Code: |
body:first-of-type{
#main {
margin-top:-15px;}
#nav {
margin-top:2px}
} |
_________________
...and justice for all...
Last edited by linx on 16/02/09 16:48; edited 1 time in total
Reply with quote
|
| |
|
|
musician
Enthusiastic Coder
Joined: 09 Feb 2009
Posts: 27
|
I've been having same questions with CSS positioning with Mac Safari and Mac Firefox. All is well in Win IE, Firefox, Safari bit a few pixels off in Mac Safari and Firefox. If you get any further with you this could let me know I would appreciate it.
Reply with quote
|
| |
|
|
musician
Enthusiastic Coder
Joined: 09 Feb 2009
Posts: 27
|
hack for Opera:
| Code: |
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.class {background: #F00;}
} |
/* Opera don't supports that, but Opera 9.2 works - you should be attentive */
| Code: |
@media all and (scan: progressive) {
#lightO92 {
display: block }
} |
onlyOpera 9.5
| Code: |
html:first-child .class {
background: #F00;
} /* valid code */ |
Reply with quote
|
| |
|
|
linx
New Programmer
Joined: 09 Feb 2009
Posts: 11
|
hacks for Safari and Google Chrome
| Code: |
body:last-child:not(:root:root) .class {
background: #F00;
} |
_________________
...and justice for all...
Reply with quote
|
| |
|
|
| Page 1 of 2 |
Goto page 1, 2 Next |
|
FAQ
Archive
Log in
Register
