I've used to vertically center block-elements like this:
.parent {
display: table-cell;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
When I need IE9 and lower support. Using css-tables as a fall-back for older IE-s of course. I don't need flex for anything else. But recently I started to ask myself: why do I even need flex here? Css-table is a robust solution supported by virtually every browser in this planet and according to this Ben Frain's article it's even faster. Isn't css-table enough here? When asking people about this I got answers like "flex is more modern" etc. That's fine and I do understand, that there are things that are only possible with flex, but it isn't really an answer here. We're talking about simplest centering block-elements.
So i have two questions:
Do i have to use flex in the case like this?
If "yes" - why?
There's a reason we moved from using tables in HTML as a layouting tool.
It's not semantic. When we think of a table we think of a representation of data.
MDN explains it well.
Prior to the creation of CSS, HTML elements were often used as
a method for page layout. This usage has been discouraged since HTML
4, and the element should not be used for layout purposes.
However, HTML emails are an exception where tables are still commonly
used for layout purposes. The reason for this is poor CSS support in
popular email clients.
So unless you're designing e-mail layouts do not use table elements or css table properties for layouting.
You can still use it if you need fallback hacks like in your example, but other than that use modern appropriate methods , be it grids ,flex , floats or whatever.
Related
There is something in my css causing my columns to squish instead of stack but I cannot find what it is. Any chance someone is seeing something in the code I am not?
Website link here: http://uspeqtest.000webhostapp.com/index.html
Thanks in advance for any info and tips.
main.css:907
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Don't switch .row to flexbox, you're breaking bootstrap...
At first, I'd recommend you to give us more details among your problem. Furthermore, I did take a look at your website and notice some faults in your source code (RMB on page - View source). So make sure you have no HTML errors at first.
I previously had some images on my site in the form of simple pills with border and a background color. They act as login/register, add to cart, etc "buttons" that when clicked give an action.
Considering the simplicity of these images, they can be remade 1:1 in CSS quite easily. While the below snippet isn't quite 1:1, it's close enough to visualize how similar a purely CSS option can be. The second pill is the image the CSS is recreating.
.butt {
border: 2px solid black;
font-family: Raleway;
font-size: 18pt;
font-weight: 500;
color: white;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
display: -webkit-flex;
display: inline-flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
height: 50px;
width: 150px;
background-color: #cc5a5a;
cursor: default;
}
<div class="butt">No Stock</div> <br/> <br/>
<img src="http://i.stack.imgur.com/hhjht.png" alt=""/>
A lot of sites I see still use sprites for rudimentary navigation, like chevrons or arrows for left/right, simple text as linked images to pages and more. I have to wonder why these are not done in CSS?
The way I see it, using CSS means it loads faster and is scalable. What benefit do sites gain from instead using images in place of things that could be done with CSS?
A benefit would be support for older versions of browsers. Most sites still want to support as many browsers and versions as possible. And not all browser versions support every CSS rule.
Compatibility, not all browsers support all kinds of css.
But other than that I think you've nailed it, CSS really is the way to go.
EDIT:
It's fair to note some choose to use sprite sheets essentially loading one big picture and then cutting different images out of that sheet to gain a desired look.
Another benefit could have to do with breaking down jobs.
For example an artist might be in charge of designing how images (or buttons or whatever) look and can easily upload and replace images where-as the programmer can place them where to go.
There are benefits to both but ultimately it's up to preference and circumstance.
In this case css is the way to go, period.
I say this because even in old browsers all you'll lose is the rounded corners on the borders and even then (with prefixes) this will only affect less than 10% of browsers. and that figure will only go down over time.
It's best to support tomorrow's browser over yesterday's, unless you have a user base which you must serve who are on old browsers (maybe on a large company's intranet, or in a country where the technology is often recycled and donated) in which think of making things functional and usable first rather than looking identical to the latest browser. This is called graceful degradation, the cousin of progressive enhancement (find out about both from the W3C on the link).
This article is also useful, particularly where clients who might be expecting those rounded corners in IE6 are concerned.
Oh, and there's also still a purpose for the image in your graphics of course :-)
The webpage is http://www.parentcenterhub.org/region6-aboutus/ It is displaying correctly on all browsers except IE9. The CSS is:
#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
The conditional css for ie 7 and ie 8 is:
.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }
There is no conditional css file for IE9. So, please suggest the code which I can put in style.css so that the page also displays correctly for IE9. Please help.
IE9 and doesn't support flexbox (see here for full browser support details), so you'll need to use something like your IE7/8 alternative layout for IE9.
You can work without having a conditional CSS for IE9 in one of several ways:
Use CSS's override mechanisms. Simply specify display:inline-block above display:flex (etc) inside the same selector, and every browser will pick the last defined option that they support. So if flex is below inline-block, IE9 will use inline-block because it doesn't understand flex, and others will use flex because they do know it and it's below inline-block. Sure, this doesn't deal with setting the width, but we've got half the problem solved without any browser-specific code at all (in fact, this would work for IE7/8 too, so you can reduce your specific code for them as well). width might be solvable with a similar trick by specifying a default value using a measurement unit not support in older browsers like rem or vmin or something, and then overridding it with % for the older browsers, but whether that would work for you would depend on your actual layout.
Use a library such as Modernizr, which will add feature support flags that you can use in the form of class names on your <body> tag. For example, it will add a flexbox class for browsers that support it, and a no-flexblox class for those that don't. This means you can write CSS code that targets browsers that support the feature or not -- eg:
.flexbox #primary {
display:flex; //etc...
}
.no-flexbox #primary {
display:inline-block;
width:70%;
}
Use a browser hack. I really don't like suggesting this, but it is an option. There are CSS hacks that specifically target IE9 if you really want to use them. I won't repeat them here though as I don't think it's the best option. If you want to use them, Google will tell you what you need to know.
Use an IE9-specific class just as you are currently for IE7 and IE8. You're doing it already, so it doesn't seem like it should be too much of a stretch.
Just use inline-block across the board. If the inline-block layout works, why not just use that. Flexbox is great, but if you need IE7/8/9 support, you're not going to be able to use it consistently, so....?
Personally, I'd go with the Modernizr solution. It solves this problem very neatly, and can also deal with most other cases where you might consider having browser-specific styles due to missing features.
I want to use flexbox for an app, and want all elements to be set do display: flex. Is that possible? if yes, how? I have alread set body { display: flex }, but it still does not apply to all body elements.
(I took my comments and turned them into an answer)
The universal selector would do the trick:
body * { display: flex; }
(Note that I've scoped it to only include elements within the body)
The universal selector can lead to (negligible, tiny, almost immeasurable) performance issues, but it's by far the simplest way of doing what you asked (given that the display property isn't inherited). The other option (a selector consisting of a massive list of all HTML) elements would take quite a long time to download and parse, too! As for best practise, I don't think either of them is a particularly awesome idea, but I don't know the details of your implementation.
The display property isn't inherited because it would wreak havoc! For example, the <a> element is an inline element. If it inherited display: block; from it's parent elements, all links would be full width and cause a line break (like a p, h1 or div). The inheritance bit of the (rather complicated) CSS2 spec is here: http://w3.org/TR/CSS2/cascade.html#inheritance
body { display: flex; } it will not work because it means apply flex to body.
instead
{display: flex;} it means apply flex to all element(selectors) in page. however I faced issue if using live server because it will apply flex to element also which is automatically applied to code editor(mine is vs code).
you can use this method
anyelement,.anyclass,#anyelement {display:flex;} adding comma after selectors means apply flex to all element which is written.
Using flex box, I'm trying to create flexible article nodes that wrap when they fill their parent container (4 or so nodes per row). Currently, they remain on one line and overflow the parent without wrapping. Any ideas?
My css:
.container {
display: -webkit-box;
height: 100%;
width: 100%;
-webkit-box-lines: multiple;
-webkit-box-orient: horizontal; }
.container article {
-webkit-box-flex: 1; }
I have been experimenting a bit with flexboxes, but as far I could find out, there is no current browser which implements the "box-lines: multiple" command.
The Apple developer documentation claims that it exists since iOS 1.0 and Safari 3.0, however the status of all the flex-box commands still reads "under development". So the command exists, and is not rejected as an error, but only the "single" value is currently working, as it seems.
IE10 will have it implemented when released. The others might be doing so in the future as well.
http://www.boogdesign.com/b2evo/index.php/ie10-future-of-css-layout?blog=2
Here is another post I found about the topic.
http://www.xanthir.com/blog/b48Z0
"The multiple line support has been marked as at-risk in the new draft, as it appears to require a more extensive treatment than is given to it in this draft."
"A pair of properties, flex-break-before and flex-break-after, can produce explicit line breaks before/after a flexbox child, or prevent linebreaks from ever occuring."