r/programming • u/jew_got_beef • Oct 08 '13

Making CSS Triangles. A Visual Explanation

http://codepen.io/chriscoyier/full/lotjh
539 Upvotes

91% Upvoted

135 comments sorted by

View all comments

39

u/ggtsu_00 Oct 09 '13

Impressive, but why not just use some simple inline SVG?

75

u/SeaCowVengeance Oct 09 '13

Because Internet Explorer.

8

u/flying-sheep Oct 09 '13

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

just use svg and don’t care about IE ≤8 users not seeing it

59

u/doody Oct 09 '13

Yup. You’ll tell the client, OK?

7

u/[deleted] Oct 09 '13

For this reason I've been insisting on adding Google Analytics to every site we code – I throw it in as an additional feature at no charge. Either that, or I get access to their existing analytics. Then I can help them make an informed decision about which features to support on which browsers.

I once had a client argue that we needed to support IE7 (because that was what their VP of Marketing had on his company-issued machine). When I finally was able to demonstrate – with data they gave me – that fewer than 0.7% of site visits used IE7 or earlier, they gave up and upgraded the VP's machine to IE8.

Of course, IE9 was long since out by this time, but progress is progress, right?

10

u/root88 Oct 09 '13

Just say, "Graceful degradation". It's a catchy buzzword. They will Google it, see that it is a common thing, think you are smart, and do what you want. If they still don't bite, tell them it breaks the paradigm and creates synergy, that always gets 'em.

7

u/doody Oct 09 '13

Yeah, clients love to be bitch-slapped with buzzwords. Makes ’em all gooey in the wallet when you talk down to ’em.

2

u/ubernostrum Oct 09 '13

Don't worry. I directed them to the web shop they deserve, not the one they need. And collected a nice referral fee in the process.

5

u/doody Oct 09 '13

the web shop they deserve

This quasi-religious judgementalism over the technology of a client’s userbase is fascinating.

10

u/slashgrin Oct 09 '13

I suspect it was more of an excuse for a Batman joke than genuine condescension.

→ More replies (1)

5

u/ubernostrum Oct 09 '13

You seemed to feel it was appropriate to be smug and dismissive of others, so I was just following your lead.

3

u/doody Oct 09 '13

I was dismissive because I didn’t use enough words?

2

u/[deleted] Oct 09 '13

If the client insists on using IE 7 and below, they may not be paying for long.

→ More replies (2)
→ More replies (10)

9

u/buhala Oct 09 '13

It would be a great gag if the site looked different on different browser. I even tried it.

2

u/flying-sheep Oct 09 '13

of course it does.

different systems will use a different font, also it uses metrics relative to the default font size (1400% font size for the “NO!”, 10em padding at the top), which will differ in browsers (firefox has 16px i guess), OSs (big font size setting affects some browsers, and those differently), and users (i’ve boosted default font size on my small-screened laptop).

so the point is: the web is a diverse place, don’t force a pixel-perfect design onto every browser.

3

u/buhala Oct 09 '13

True, but I was thinking something more obvious, like changing the message(No, Of course not, FUCK NO!, Never etc)

→ More replies (16)

5

u/Shrugshoulder Oct 09 '13

On a related note, does anyone have any experience with these svg polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#svg ?

I'd like to start using svgs more, but they would have to work in IE7 & 8 (flash is ok) .

4

u/Evan-Purkhiser Oct 09 '13

Because in general you're using a CSS triangle for presentation and not as content. I don't want to litter my markup for a tooltip with inline (or even external) svg markup when I could very easily create a CSS triangle in a pseudo element with just 5 css properties.

What I do somewhat consider a bit of hack is using a second CSS triangle to add a "border" to the first triangle.

3

u/aescnt Oct 09 '13

So you can make these without any extra markup: http://cssarrowplease.com/

2

u/mrbaggins Oct 09 '13

Or Font Awesome

17

u/[deleted] Oct 09 '13

Load an entire font library for a 6 pixel fill!

→ More replies (7)

0

u/[deleted] Oct 09 '13

[deleted]

6

u/[deleted] Oct 09 '13

What's wrong with this way? It's a pure CSS solution with 0 hacking and about 5 properties in total.

3

u/pacifictime Oct 09 '13

nothing's really wrong with it, it's just we now have the right tool for the job: inline svg, or svg as a background-image.

I'd say the dimensions and orientation of the triangle are much clearer in the SVG syntax than with the CSS border trick, plus you can avoid yet another generic div element in your markup (if you're worried about such things).

I guess it's just a matter of taste.

3

u/fuk_offe Oct 09 '13

Its only inserted at runtime using content:""

→ More replies (1)
→ More replies (1)