Vendor Prefixes (-moz, -webkit) finally obsolete, or..?

[Under S.]

I was looking over my code today, and every instance of rounded corners kinda looks ike this :

.classname {

    width: 300px; height: 300px;

    -moz-border-radius: 20px/20px;

    -webkit-border-radius: 20px 20px;

    border-radius: 20px/20px;

}

I didn't mind it at first, but as the website nears completion, streamlining is more on my mind than it was during building. So I Googled the subject of vendor prefixes (and their relevance in 2017) and found this. It's a year old, but about as recent an article as I've found on the subject.

So now I ask, what percentage of my audience am I potentially losing by doing away with -moz & -webkit backup code on a website scheduled to go up this summer?

[pziecina]

Don't use that if you want it to be center of the screen, as the center will depend on the users browser size and/or the devices screen size.

First you will have to decide just how big the div will be, then use the css calc function to let the browser position the div.

calc(50vw - half the size of the div) , so say your div would be 200px then you would use -

-webkit-calc(50vw - 100px);

calc(50vw - 100px);

[pziecina]

Under S,

To read up on using the calc() function check the resources and the info at -

http://caniuse.com/#feat=calc

[osgood_]

https://forums.adobe.com/people/Under+S.  wrote

Leaning towards leaving the prefixes in until someone tells me they're safe to remove on mobile as well in 2017, and that doesn't seem to be the case quite yet.

While I've got you pros here, I thought I'd throw this minor question in, since it doesn't really warrant its own thread. If I want a DIV to begin 200px left of the center of the screen, extending to the right edge of the browser -- while responding to browser re-sizing fluidly -- would the following code be considered "good," or at the very least, "acceptable"?

div.name {

     position: absolute;

     left: 50%;

     margin-left: -200px;

}

I'm asking because I tried "left: 50%" as a total guess, hoping it would do pretty much what it did (begin the div at the center X point on-screen)... I then expected to have to throw in a "right: 0" but it seems the div's natural properties took care of that.

I've only tried it in a couple of browsers and it seems to hold up. Am I understanding how CSS works well enough to start trusting myself more? Or are lines like "margin-left: -200px" considered cheap hacks to be avoided?

I would do it like below if you must use absolute positioning for some reason: (Edited oh right you want it 200px left of the 'center' of the screen NOT 200px from the left edge....that's more complicated, Paula's suggestion might work).

.wrapper {

position: absolute;

width: 100%;

}

.wrapper div {

margin-left: 200px;

background-color: yellow;

}

<div class="wrapper">

<div>Content</div>

</div>

EDITED (the below would work use the calc suggestion):

body {

margin: 0;

padding: 0;

}

.wrapper {

position: absolute;

width: 100%;

top: 200px;

}

.wrapper div {

margin-left: calc(50% - 200px);

background-color: yellow;

}

<div class="wrapper">

<div>Content</div>

</div>

[pziecina]

I've almost converted everyone to using flexbox, now I'm working on everyone using calc() .

[osgood_]

pziecina  wrote

I've almost converted everyone to using flexbox, now I'm working on everyone using calc() .

I must include it somewhere in my next project.

[Under S.]

osgood_  wrote

EDITED (the below would work use the calc suggestion):

body {

margin: 0;

padding: 0;

}

.wrapper {

position: absolute;

width: 100%;

top: 200px;

}

.wrapper div {

margin-left: calc(50% - 200px);

background-color: yellow;

}

<div class="wrapper">

<div>Content</div>

</div>

I don't mean to be contrarian, but that is very similar to what I was already doing; except that your solution requires 2 classes instead of my 1, since you use an additional wrapper.

Is there any tangible reason why doing it with "calc" would cause fewer issues down the line? Is "calc" a property that works on older browsers, like "left" and "margin" do? (Sorry, this is literally the first time I come across the word in CSS, I'm more of a designer who codes because no one else will do it.)

Here it is again, to compare with yours (begins 200px left of center, extends to the far right of the viewport, could be any height) :

div.name {

     position: absolute;

     left: 50%;

     margin-left: -200px;

}

It could very well be that "calc" is as old as "left" + "margin" and I just never came across it, so my hesitation to use it is likely unfounded.  Reassure me as you would a child!

[pziecina]

You can use calc in all modern browsers including ie9+, but check the known issues in the link i supplied.

The advantages about using calc is that it is the browser that works out how to display whatever it is, and a fixed setting is not required. calc becomes more usefull once you start to layout components proportionally depending on the users viewport size. There is no requirement to reset proportions in a media-query as everything can be worked out using just the one calc.

What has been posted shows a very limited use.

[osgood_]

https://forums.adobe.com/people/Under+S.  wrote
osgood_   wrote

EDITED (the below would work use the calc suggestion):

body {

margin: 0;

padding: 0;

}

.wrapper {

position: absolute;

width: 100%;

top: 200px;

}

.wrapper div {

margin-left: calc(50% - 200px);

background-color: yellow;

}

<div class="wrapper">

<div>Content</div>

</div>

I don't mean to be contrarian, but that is very similar to what I was already doing; except that your solution requires 2 classes instead of my 1, since you use an additional wrapper.

Because your code doesnt work. The <div> DOESNT extend all the way to the right edge of the browser, as you said you wanted it to in your original post. If you want the <div> to extend to the right edge of the browser you would have to give it a specific width IF you use position: absolute; You dont know that width.

If you dont use position: absolute; by default the <div> would extend all the way to the right edge of the browser.

If you want to use position: absolute; then wrap the div that you want to extend all the way to the right edge of the browser in a wrapper as suggested.

[Under S.]

osgood_  wrote

Because your code doesnt work.

You are correct, seems I oopsied up there when I mentioned the class not even requiring a "right:0" to work. It literally started working when I added that, so I don't know where my head was at earlier.

Here is the actual code :

.classname {

    position: absolute;

    left: 50%; right: 0;

    height: 500px;

    margin-left: -200px;

    background: url(/img/img.jpg) no-repeat center;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

}

This not only stretches but fills that space with an image that stretches with it. Sorry about the earlier confusion. But it does work on all 3 main browsers I checked it on, with that "right:0" added.

[kiemthecao]

Good Idea

[Under S.]

Just wanted to return to this thread specifically to thank pziecina​ and osgood_ for turning me on to calc(). Although I'm pretty sure it's more or less equivalent to the original "left:50%; margin-left:-200px" calculations I improvised when it comes to potential issues with physical placement down the road, I can see it coming handy in a bevvy of other situations.

[osgood_]

https://forums.adobe.com/people/Under+S.  wrote

Just wanted to return to this thread specifically to thank pziecina  and osgood_  for turning me on to calc(). Although I'm pretty sure it's more or less equivalent to the original "left:50%; margin-left:-200px" calculations I improvised when it comes to potential issues with physical placement down the road, I can see it coming handy in a bevvy of other situations.

Use whatever solution you feel comfortable in deploying. If you've tested it and it works, no reason not to use it.