I want to apply a gridding system to my project, but the resource I got was applicable only to IE8-10, the grid doesn't work fine on other browsers.
I want the grid to display efficiently on Chrome, Opera, and Firefox(Cross-browser).
This the css code:
body{
-ms-grid-columns: ;
-ms-grid-rows: ;
}
body{
display: -ms-grid;
}
How can I do this?
This has already been answered on Stack Overflow here.
The correct answer is by thirtydot on there. to paraphrase to bring that answer up-to-date and more relevant to your specific question:
Grid Layout has very poor support - the declarations you're using that start -ms are Microsoft vendor-specific and not supported by other browsers.
Webkit (the engine behind Chrome and Safari) has been working on an implementation as seen here but it's still incomplete and uses slightly-different syntax:
.gridWithFixed {
display: -webkit-grid;
-webkit-grid-columns: 7px 11px;
-webkit-grid-rows: 17px 2px;
}
So, right now there isn't a way of implementing your CSS in a way that will work outside of nightly browser builds and IE10.
As an alternative, Flexbox has decent support (including IE10). So, the best you can do is use Flexbox instead.
css3 support cross-browser/platform is quite pathetic at the moment.
flexbox is an option, although with its limited support, # least in legacy browsers, it's not a knockout. this depends on what you are supporting: how many browsers, browser versions, user agents, etc.? are there a lot of legacy or "non-modern" browsers in that list? then i would avoid flexbox.
i would use 960gs or unsemantic, cross-browser grid layout libraries. unsemantic is the successor, but they are both versatile, and very light-weight.
Related
I am using Modernizr v3 on my website to test for flexbox support.
Modernizr adds a "flexbox" body class for browsers that support it, and "no-flexbox" for browsers that do not. As browsers that don't support flexbox are only a minority of my audience, I have used the "no-flexbox" class to provide fall back CSS. For example:
.ad { /* Default CSS */
display: flex;
}
.no-flexbox .ad { /* Fallback CSS*/
display:table;
}
Everything works fine, except for IE10, as Modernizr adds a "no-flexbox" class to it, even though IE10 does support Flexbox, it is just using the older syntax. Therefore, on IE10 my layout is broken as it reads both the flex box and non-flexbox styles.
In this thread, it says that moderniser has a flexboxtweener style to IE10. Therefore, I thought I could rewrite my fall backs to use .no-flexboxtweaner instead of .no-flexbox.
The problem is that browsers that support the new flexbox syntax get given a no-flexboxtweaner class as well, so they read the fallback code.
How can I set it up so that only the browsers that do not support any form flexbox (regardless if it is new or old) get the "no" class.
I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class.
I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class.
Thats kindof silly, mate. It is a handful of bytes - almost all of which will be erased by gzipping your file. If you reallllly wanted to avoid it, you could create an additional Modernizr check that gives you any flexbox
Modernizr.addTest('anyflexbox', (Modernizr.flexbox || Modernizr.flexboxtweener))
that will create a new property called anyflexbox and you can style your css accordingly.
Detects support for the flex-wrap CSS property, part of Flexbox, which isn’t present in all Flexbox implementations (notably Firefox).
This featured in both the 'tweener' syntax (implemented by IE10) and the 'modern' syntax (implemented by others). This detect will return true for either of these implementations, as long as the flex-wrap property is supported. So to ensure the modern syntax is supported, use together with Modernizr.flexbox:
if (Modernizr.flexbox && Modernizr.flexwrap) {
// Modern Flexbox with `flex-wrap` supported
}
else {
// Either old Flexbox syntax, or `flex-wrap` not supported
}
Ref: https://modernizr.com/docs
I've been looking around StackOverflow and even else where to find if display: inline-flex; works in IE9. I posted a question before this when I had trouble with expanding a width dynamically, question here.
The answer helped me out, thank you who ever you are! Now that I've fixed the issue and it works fine in Chrome, Opera, Mozilla, Safari, IE10+, I still have trouble making this work in IE9.
I've also tried to add pre-fix for display: inline-flex; such as display: -webkit-inline-box, -ms-inline-flexbox, and so on.
The problem I had which fixed the whole deal was width: auto; and display: inline-flex;
Working fiddle here
How can I make this to work in IE9?
As you can see here: Can I use FlexBox? Flexbox is not supported in IE9
EDIT : Based on OP comment to answer:
if there's any way to make it work in IE9, with prefix or something?
here is a SO users' answer from another related question:
I understand from your question, that you are aware of the fact that
IE9 does not support flexbox.
A polyfill for flexbox, named flexie.js,
does exist (not maintained afaik), but it works using the old 2009
syntax of flexbox.
Using the old syntax is of course not recommended,
since the 2009 syntax is really outdated and many browsers won't
recognize it anymore. But, you can try to use Autoprefixer, which
transforms new-syntax rules to old-syntax rules (while preserving the
new-syntax for browsers that do support it).
There are caveats - You won't be able to use inline-style, you would have to write your styles in CSS files, and I don't think it supports dynamic changes to the
DOM.
Disclaimer: I haven't tried that method with IE9 + flexie.
The browser support for hyphens: auto is still a bit lacking, even for English, but I would like to provide it already to my visitors using Firefox. If the browser does not support it, however, the gaps in the justified text are unseemly wide, and I would rather fall back on flush left alignment.
This is essentially what the CSS code looks like.
p {
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
I’m aware of JavaScript libraries like Hyphenator.js that provide hyphenation for a range of browsers, but is there maybe a pure CSS solution for my simpler use case? I’ve come to think of hyphenation as less than essential on the web, unfortunately, and don’t want to embed a JavaScript library if there is a simpler fallback solution. Thanks!
The new #supports property can do it, however that is not supported by all browsers either. If you are willing to accept that as a limitation you can look at the Mozilla Docs here:
#supports
I've wondered this for a while. Why do different browsers only support the CSS border-radius property if it is prefixed with their own special prefix. I don't understand why I have to write this:
/* For Firefox and other Gecko browsers */
-moz-border-radius: 5px;
/* For Chrome/Safari and other Webkit browsers */
-webkit-border-radius: 5px;
/* For others */
border-radius: 5px;
When I could just write this:
border-radius: 5px;
Is there a reason that I'm required to write the prefixes? Why don't the browsers all just support the border-radius property? It just doesn't make sense to me, why browser developers decided to all have different properties that just make my life harder. Is there a technical or legal reason behind it?
The answer to this question is essentially the same given here:
Why there is -moz-XXX and -webkit-XXX in the CSS3?
That "namespacing" allows vendors to test new cool features, and if
they're great, they can be incorporated into the standards. This is
what is happening [here]: Mozilla and the Webkit team tried cool
things, and now they're going to become standard. It's just not done
yet.
Basically, life isn't perfect. Ideally yes, it should be standardized. It's an old issue dealing with the various large companies/groups that develop browsers. W3C tries to make standards, but in the end you can't force anyone.
Try reading more at this very relevant SO.programmers page - https://softwareengineering.stackexchange.com/questions/103048/why-is-it-unrealistic-to-expect-all-browsers-to-support-the-same-standards . And more regarding browsers/compatibility here,
Eventually they will all support the standard border-radius. I'm given to understand they do that when things are up in the air standards-wise, or for similar reasons.
(also, no need for -moz-border-radius, the normal cross-browser is now supported by Gecko. I believe it's the same for WebKit too, but I'm too lazy to check.)
The CSS3 Specifications are in the main browsers partly implemented and you get very nice results with less code, but there are many reasons not to use CSS3. E.g. not downwardly compatible, probably not similar renderd views on different browsers, etc.
So I'm asking myself: Which is the best way to use CSS3 anyway with a option to intercept default problems, like I've discribed above?
As long as your site degrades gracefully there's nothing wrong with using CSS3 now. Afterall, if a browser does not understand a particular CSS rule it will just ignore it:
#foo {
border:1px solid #000; /* shown by all browsers */
border-radius:5px; /* shown if browser understands border-radius */
-moz-border-radius:5px; /* Firefox only */
-webkit-border-radius:5px; /* Safari and Google Chrome */
}
As long as the site does not look broken in browsers that don't support the CSS3 rules you want to use then you should be ok progressively enhancing your site in the browsers that do support them.
You might find "When can I use..." useful for seeing what features you can reasonably use.
If your making a public website then you have to support ie6, which means no css 2.1, let alone 3.
One thing you can try is: lesscss
This will let you use shorthand css notation and "compile" it to valid css on build.