I was just wondering if it was possible to change a bit of your CSS if it is being viewed in a different browser.
For example, I'm using this particular CSS for a flexbox div:
.wdFlex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
It works nice in Chrome, Safari, Firefox, IE10+ etc., but as you know, IE9 does not support flexbox. Now, I can do the thing flexbox do in normal CSS, but now I just wanna learn some flexbox stuff and try it out. But ofc, IE9 should be supported in my opinion, so my question is, if there is any way, without changing the entire css file via:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
to change the css ?
Just like instead of the flexbox thing in the above CSS, it just wrote out, if IE9:
.wdFlex {
display: inline-block;
}
As an example.
Hope you understand what I mean :)
Thanks in advance.
You can take advantage of CSS cascading, so if the property is not supported in the browser you can write a fallback.
.wdflex {
display: inline-block; /* for IE9 */
display: flex-box; /* browsers that support it will pick it up */
}
For this particular example you could use conditional comments to apply browser specific classes to the html tag in the markup like so:
<!DOCTYPE html>
<!--[if IE 9]><html class="ie9"> <![endif]-->
<!--[if IE 10]><!--> <html class="ie10"> <!--<![endif]-->
Obviously can write more classes and do more complicated things with this, but you get the idea. Then just write the css on the class.
This post goes into more detail about this technique and specifically handling display: flex
http://designkarma.co.uk/blog/using-flexbox-now
Related
I have a menu with list item displayed in a vertical list using flexbox and flex-direction:column.
It's working great in all browsers except for IE and Edge.
I tried tricks like adding display flex to the flex container but it's not working either.
Any ideas ?
Here's the website where the problem happens : http://lesdeuxvagues.com/demo
Click the plus button in the menu to see the problem
CSS:
ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
Turns out i just fixed the issue by adding display:block; to my list items.
They had a display:table-cell from the foundation framework that might have caused this problem!
I am designing my personal website and some codes doesn't work in safari.
it's my website url
http://hoomansanjabi.ir
I want to centre my logo.
I'm thinking safari has problem with this codes:
.header {
text-align: center;
display: flex;
-webkit-justify-content: center;
justify-content: center;
flex-direction: column;
}
I have recently been developing a website using flexbox, and have been doing so on Chrome. The site looks perfect on Chrome (and Safari, according to users) however it has some serious issues when viewed on Firefox and IE. I have tried to look online for documentation on which prefixes to include in my CSS and how to make it appear normal on those browsers, but I truly cannot find a summation or tutorial anywhere. Here is a sample of my CSS code, containing flexboxs that do not display correctly on Firefox and IE -
.header {
padding: 12px;
padding-top: 10px;
padding-bottom: 0px;
margin: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
height: 70px;
background-color: #000000;
}
.header-box {
padding-left: 15px;
padding-right: 15px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
align-content: flex-start;
align-items: flex-start;
height: 70px;
width: 1170px;
background-color: #000000;
}
This code is for a header bar along the top of the site. I thought by including the display: -moz-box; and such, that would allow it to be seen on Firefox, but the formatting is messed up in the sense that the box is not centered but instead along the left side of the screen, and the boxes within the header are all along the top of the parent container rather than on the bottom. Thank you for any insight you may have on this problem!
In only works on webkit browsers because you only use
-webkit-flex-flow: row wrap;
You should use the standard
flex-flow: row wrap;
Otherwise, the initial value row nowrap will be used instead.
Flexbox seems to have a bug when you try to override a previous applied justify content parameter. What I want to do is justify content centered, but after a certain width apply a media query to the same item to justify content space between. The effect is that justify content space between doesn't override the original centering but instead applies additional to the original style. The result is items disappearing off the screen. Examples:
Original style:
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
Then apply a media query:
.header {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
The result is not what you would expect, as if you set justify content space between on the original style. Instead its as if center is still applied, and it tries to justify content space between ontop of the centering already happening, instead of removing centering and applying justify content space between.
I have a flexbox div that allows a SINGLE child element. So far I've been able to get alignments of the child working nicely (top, left, right, bottom, etc), including vertical stretch. I also want to be able to support horizontal stretch at the same time as vertical ('at the same time' seems to be the key).
I've been able to accomplish horizontal stretch by setting the 'flex' property to '1 100%' on the child element, however this appears to ignore any padding applied to the parent element(and any margin applied to the child node for that matter).
Looking at the flexbox spec, I'm not able to find any other way to do this along the main axis of the flexbox. Cross-axis stretch is no problem.
It is possible. And here is a small sample which shows you how:
.centerbox {
/* basic styling */
width: 350px;
height: 95px;
font-size: 14px;
border: 1px solid #555;
background: #CFC;
/* flexbox, por favor */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
<!DOCTYPE html>
<html>
<head>
<style>
.centerbox {
/* basic styling */
width: 350px;
height: 95px;
font-size: 14px;
border: 1px solid #555;
background: #CFC;
/* flexbox, por favor */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
</style>
</head>
<body>
<div class="centerbox">
<textarea>resize me, please</textarea>
</div>
</body>
</html>
FYI: Axel Russell did some great work on writing a class for multi browser support: http://infrequently.org/2009/08/css-3-progress/
Although you found your solution, I think the next snippet could be handy to all developers (such as myself) who searched for a general solution.
http://jsfiddle.net/EL2KL/1/
I'd be happy if you publish fiddle with your solution.
p.s. thanks to Jiri (the flex master)