Elad Shechter

@georgemacin , the issue in this way, that you need to know the width to center, and it isn't always the case.

Thanks a lot! I didn't notice the mistake :-)

Yep, you can kill all the birds

@shuraki, this protip just say how your mobile react to the responsive breakpoints.

There is nothing to add to your CSS.

Now, if you want you can add support for retina screen according to the pixel density of screens or with Responsive breakpoints that recognize your screen density.
or you can use SVG images that are appropriate for all screens.

like this Example(breakpoint for high density screen):
(-webkit-min-device-pixel-ratio : 2)

or

SVG Support to your project
https://coderwall.com/p/ohwa5g

@projectcleverweb Thanks for the respond, the all idea of the post is that we can make SVG sprites, for better quality on retina screens.

The object tag is more for regular images, i'm mean in the semantic way, you use img for pictures for articles, and background-image for design.

@stowball I didn't understand why you say it's a problem. the font size is salable if i change to root font-size in the media queries according the breakpoints.

@hector ,before and after aren't real elements. the * isn't apply them.

check my example I made for you(checked in chrome).

http://codepen.io/elad2412/pen/mJwpG

the before element isn't catching the box-sizing, even when i had the * selector. try to add to the before element box-sizing:border-box;, in my example, to see the different.

@hector The point of the before and after pseudo classes, is for resetting them to, the * selector isn't resetting them.

For if it's good or bad practice time will tell.

if the fallback was CSS only, I would consider start using SVG.

@thomaslindstr_m , 10X for checking

@magnetikonline, From what I know all web kit browsers support it without prefix

@davsket , It's your choice to use it or not, time will tell if it's good or bad - after more Experience with it. There are website like css-tricks that are already using it now. To say this solution is bad practice Because you think reset isn't a good idea, it's a whole topic in itself.

@tome And what with IE8?
sometimes the decision aren't always of us.

My solution benefits<br>
1. My solution it's better then to calculate with JS the exactly position(for IE7 and IE8).<br>
2. It's dynamic for for unknown width size.<br>
3. Supports IE7 & IE8. (sometimes you mast support them).

And until you bring solution that resolve all this issues, this is still necessary solution.

And if you find something that does that, I would love to know It.

@tome I will agree to disagree. I show example with images. One time the image 200px width and in the second time it will be 400px, what then?

@tome you need to know exactly width...., in my solution it's dynamic

@tome . you can't use margin 0 auto with position fixed.....

@tome , its good for supporting all browsers. It's better to use Only one wrapper. But if you need to support IE old versions?
We still use extra elements, sometimes for design. I remember the days that we made 9 elements for rounded corners. We need to prefer the minimum elements we add to the page, but sometimes is the less worse option.....

@barnettjw , its nice, but the issue is for device you dont have :-)

In the future, :not(:first-child). But for supporting ie7 & ie8, this is one of the best solutions.