This topic is part of our CSS Tutorials and Add-ons section: http://myanimelist.net/forum/?topicid=419405 This is not hacking like gettin passwords or doing what you're not supposed to lol. Just tricks for making CSS coding consistent with more options. Nothing illegal. Hacking browsers to address browser-specific changes A common problem is your list will look one way in one browser and different in another browser. To fix this, use a CSS hack to target a specific browser with codes that won't affect other browsers. With any of these hacks, you put the new codes in between the brackets. For example if you put body{background: blue} into the Google Chrome hack brackets, and red at the start of the CSS like normal, what would happen is the background color for body would be blue in Google Chrome and red in all other browsers: Here are all the current browser hacks I know of and use below. Google Chrome, Safari, recent versions of Opera and IE @media screen and (-webkit-min-device-pixel-ratio:0) { } Firefox @-moz-document url-prefix(){ } Hacks for older browsers are listed in the comments below, or you can just Google for it. There are also ways to target different screen sizes and phones: http://myanimelist.net/forum/?topicid=524033 |
nymphiaeDec 16, 2015 8:10 PM
Shishio-kun said: Hacking Google Chrome to address browser-specific changes This should work with any webkit-based browser like Chrome, Safari (both for PC, Mac or iPhone), Nokia S60 browser and less popular ones like Maxthon as well Opera UPD: Making code Opera-specific: put "*:-o-prefocus," in front of selector you want to only work for Opera like: *:-o-prefocus,body{background: #AAA} |
Shishio-kunJun 9, 2012 2:33 PM
 |
| FireFox Tested in 3.6 & 10, 12, 13 noindex:-moz-any-link, body {background: #AAA}The trick behind this and Opera's is that browsers are forced to skip the selectors list if they find an invalid one, and since these have -moz- (or -o-), which is definitely browser-specific, it will only work in FireFox (or Opera respectively) OR: @-moz-document url-prefix() |
Shishio-kunJun 9, 2012 2:34 PM
|
| Internet Explorer 9 I used this for latest standard IE9 (the version which looks like Chrome). Should be fine since someone using IE is probably going to also have it update automatically and probably won't be using the old ones which have fallen out of use more and more. I noticed it didn't seem to effect some properties but I managed to make it work for what I was using it on. Its on the bottom of this CSS I'll link you to, for some reason it can't be posted here. I used it to change div > table:first-of-type a { margin-left: 60px; } Notice there is something added before the selector div > table:first-of-type a , and before the semi-colon. https://dl-web.dropbox.com/get/Public/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategoryNoAll.css?w=fd84a747 |
Shishio-kunJun 9, 2012 2:22 PM
| What if I want to divide my CSS imports in my edit box between the major browsers, lile: firefox import chrome import opera import safari import ie import is this possible and how would I do this? |
Shishio-kun said: What if I want to divide my CSS imports in my edit box between the major browsers, lile: firefox import chrome import opera import safari import ie import is this possible and how would I do this? Try it - http://www.conditional-css.com/usage |
 |
Hahaido said: Shishio-kun said: What if I want to divide my CSS imports in my edit box between the major browsers, lile: firefox import chrome import opera import safari import ie import is this possible and how would I do this? Try it - http://www.conditional-css.com/usage Hmm this sounds good since I want to divide CSS between browsers to reduce load time but I don't see how he can set this up for imports. I want something like: [if Webkit]@import "http://dl.dropbox.com/u/78340470/chrome.css"; [if Opera]@import "http://dl.dropbox.com/u/78340470/opera.css"; [if Gecko]@import "http://dl.dropbox.com/u/78340470/firefox.css"; so it only loads the CSS specific for that browser. If anything, I just want to separate IE completely lol. |
Shishio-kunDec 10, 2012 10:46 AM
| Bumped cuz forum got rolledback... |
Shishio-kun said: Hmm this sounds good since I want to divide CSS between browsers to reduce load time but I don't see how he can set this up for imports. I want something like: [if Webkit]@import "http://dl.dropbox.com/u/78340470/chrome.css"; [if Opera]@import "http://dl.dropbox.com/u/78340470/opera.css"; [if Gecko]@import "http://dl.dropbox.com/u/78340470/firefox.css"; Thats' supporting // Conditional import example [if SafMob] @import('iphone.css'); [if ! SafMob] @import('non-iphone.css'); It's not a specific CSS. These are conditions. For example, if you're using Firefox then loads one style with own settings, if IE then another style |
HahaidoDec 10, 2012 9:19 PM
|
More topics from this board
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
56 |
by Pafon
»»
2 hours ago |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7921 |
by takkun_
»»
Yesterday, 9:54 PM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |