I'm creating a TV weekly schedule for printing and I need more space in paper because of my large table. I found a CSS rule that helps you change the margin of pages in printing, like following example:
#page {
margin: 0.5cm;
}
I'm wondering do all the browsers support this feature? And if they do, which versions?
And if they don't, is there any alternatives?
Here is the compatibility report : http://www.browsersupport.net/CSS/#page
Looks like it is supported in most versions of Chrome and Opera, and Internet Explorer 8 and above, and current versions of Firefox.
Related
I used display:flex; in every css file of my site but now it is working fine in google chrome but in UC Browser(phone) it is not working.It is just skipping flex and showing items vertically.How can i correct this without changing the full coding of the site.
Thank you
Please note that most web standards are not supported in UC browser along with the fact that it removes some css and js from web pages for faster page load.
Still, it uses WebKit as its rendering engine, so you can try to support Webkit as much as possible and you'll be good to go. Furthermore, tools like auto-prefixer will fix most of the cross-browser issues.
It's best to consider caniuse.com to check which features are supported by your target browser.
It depends on how you've structured your css. display:felix; doesn't work in all browsers. This is why it's important to research your css and browser compatibility.
Use this caniuse.com
Use display:-webkit-flex;
I think display:flex; isn't supported in UC.
i think this is right for flex
display:-ms-flexbox; //for ie older version
display:-webkit-flex; //for chrome older version,firefox older version,safari
display:-webkit-box; //for android ucbrowsers forever,i think you gonna try this line
display:flex; //for all new versions browsers like chrome 66 and above firefox 46 and above ie11 and above eventhough safari , opera and some more newversion browsers can support this line
you can go for this line in ucbrowsers in mobile or pc => display:-webkit-box;
if you want inlie-flex try this and it's works display:-webkit-inline-box;
Vaguely related to this question, but not quite the same. I'd like to target Chrome ONLY, without targeting Safari.
I used the following media query, but it targets both Chrome and Safari:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
h1, h2 {
font-weight: bold;
}
}
Chrome does a great job at rendering the header elements in bold even though a bold version of the font I'm using doesn't exist. Safari... not so much. Hence the super specific targeting. For reference, the font is Cody Star.
There are browser-specific CSS hacks that might work for this problem now, but they certainly aren't supported.
IMHO, your best bet is to add a class to the body tag using JavaScript that reads your navigator.userAgent and use that class (body.chrome for example) to target Chrome.
Safari,Chrome,Opera all of them are Web-kit browsers, so it's very difficult to find a CSS or media query hack to target this browsers specifically,
but here is a JavaScript code that will target the Google Chrome,
not all the versions of Google Chrome,But Chrome 14 and later.
var isChrome = !!window.chrome && !!window.chrome.webstore;
if you want to know more information,please refer to my answer,for this question
I am newbie to web development, in specific browser related css compatibility issues.
I have the following css in my home page, which works fine in Firefox, and I can see the css properties when I inspect the element using firebug. But the same css rules are missing when I use chrome. when I inspect, I can't even see the rules in chrome. I wonder why this happens. I understand that some css rules are browser dependent. But now am really confused by thinking how could I resolve this.
Please refer to this link to see my css rules.
Any suggestions regarding why and how this happens. Any useful link also will be appreciated.
Thanks in advance.
Try using a media query, selecting only webkit specific stuff such as:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Your CSS */
}
This query checks the device pixel ratio in webkit. Safari & Chrome are the only big browsers using webkit, so this will not affect FireFox or IE.
I'm new in this area and I wrote a div style which didn't work properly for firefox 4, opera 11.1 and for ie 8.0 but worked for chrome 11. The code which was a style for a div was the following only with a different order
#info_text
{
background:#fdf6cc;
width: 650px;
margin-left:1px;
padding-left: 30px;
padding-right: 263;
min-height: 90px;
}
After changing it this way it worked for all the browsers except for the Internet Explorer 8.0.
Can I do something to make it work or it's the problem of the browser?
Does it metter the order in this case?
The order doesn't matter in this case.
You are missing units for the padding-right property. Running your code through a validator will flag errors like this.
Welcome to world of web development! All browsers interpret CSS differently, particular old versions of IE (try the above in IE6 for some fun!)
To understand exactly what problems you're having we need to see a working web page with the above.
The order of the CSS doesn't particularly matter to be honest, though obviously later CSS overrides earlier CSS and this something which is used commonly in the industry.
try opening "developer options" under "tools" in ie, if there is a more specific class, it may be overwriting something, or if something is formatted poorly, IE may be excluding it all together. Another option is "firebug lite", firebug is a very useful tool for getting started with css, javascript, and page structure. Without a link to the page that you are having the problem on, it's very hard to determine the cause, I copied your css and tried it myself, but got the expected result in all browsers
I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
FYI, this hack only targets Safari 3, and also targets Opera 9.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
#media screen and (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
By using conditional stylesheets you can avoid hacks all together and target browsers.
If you are looking to do something special in safari check out this.