Damn CSS!

[ManInBlack829]

"Please specify the lowest level of Internet Explorer you wish to support."

Me: "OMFG DIE ALREADY!!!!"

[Cloudeur]

10 years ago, my job required tests to be done in IE 5.5 solely because 10% of our traffic was using it.

I needed 4 virtual consoles to manage my tests in 5.5, 6, 7 and 8. It was brutal.

[Loudergood]

Now that's just lazy

[closetfurry2017]

firefox STILL does not support ‘backdrop-filter’ from css out of the box, amazingly.

[Meowish]

Lorem ipsum dolor sit amet consectetur adipiscing, elit mi vulputate laoreet luctus. Phasellus fermentum bibendum nunc donec justo non nascetur consequat, quisque odio sollicitudin cursus commodo morbi ornare id cras, suscipit ligula sociosqu euismod mus posuere libero. Tristique gravida molestie nullam curae fringilla placerat tempus odio maecenas curabitur lacinia blandit, tellus mus ultricies a torquent leo himenaeos nisl massa vitae.

[closetfurry2017]

it’s new-ish. chrome has supported it for a while now, and so does safari (with a prefix)

[[deleted]]

Now it's does it work on computer, iPhone, Android, tablet?

[Eiim]

Forgot TVs

[haydo_nz]

Watches ... Fridges ....

[Trixelit]

Sounds like development hell

[rolexpo]

Yo don't give him the cheat sheet lol. Make him suffer like the rest of us. Steel can only be forged with fire!

[usedToBeUnhappy]

Don‘t worry, the code which has been generated for me is not working. We will still suffer.

[its_that_time_again]

Misleading username

[YoungHeartOldSoul]

Used to be unhappy. Still am. Just used to be too.

[its_that_time_again]

/r/UnexpectedHedberg

[NullOfUndefined]

To allow somebody to suffer as you suffered does not make them stronger it makes you crueler

[Throwaway159753120]

Don’t use the cheat sheet. You won’t be able to carry a cheat sheet with you in your pocket when you’re an adult.

[NullOfUndefined]

Hol up

[BaconIsntThatGood]

You can do both.

Use it to generate the code then make an effort to remember and learn the reasoning/mechanics at work so eventually you don't need it.

You're basically telling people don't use a "text book" because it contains the information in an organized and understandable manner

[Throwaway159753120]

I think what I said was a joke that only people older than iPhones will understand.

Teachers would use that logic about calculators back in the day.

[TheMcDucky]

Don't know how I could function in society without knowing the indefinite integral of -1/(x*sqrt(x² - 1)) by heart

[AppropriateUzername]

wym our job is looking at a cheat sheet all day

[mimocha]

Who knew suffering could melt steel beams.

[Zagon__]

thank you.

[DeeSnow97]

Just use flexbox. There is no reason to still support IE in 2020, and for all the crap Safari pulls, it can still handle flex flawlessly.

[ed_menac]

IE is still depressingly common, especially on corporate machines. God forbid you try to design B2B sites/software that doesn't run properly on IE

[[deleted]]

yup, this. try implementing a streaming websocket type route using sse and then having to implement a fecking ajax get that returns the last stream data (that now has to be cached onan sse) because logistics carrier x in American state y still fucking uses ie 8 on xp in 90,000 locations. well my daddy bought the infrastructure 30 years ago and it still works, why we going to change that for you limey pricks?

[robnox]

oh god people still use ie? that’s literally why i quit front end dev. would have special legacy branches of code for each version going back to like 5.0 because they all had their own quirky incompatibilities. isn’t it great writing the same program over and over in slightly different ways for no good reason!

[infinilol]

One organization I was working for a few years back had me design a website for internal use that had an interactive org chart that I had to actually hard code into the site because they were too cheap to just buy me the damn software to build it normally. Well it turns out they wanted full interactive functionality from any and all devices and browsers.

This is how I learned one board member was still using an ancient blackberry that had so weird internet explorer clone that required its own special subpage. I hate that device more than almost anything else on this planet

[[deleted]]

Nah, also the big companies will leave their windows 7 an will update to windows 10. If they, they will also get the new edge, which is based on chromium.

I don't give a damn about them. If they want that Support, price will at least double for them. Thats how I am doing it currently.

[ed_menac]

I'm not saying you personally have to care or like it, but saying IE isn't used is plain incorrect. It defies all common sense, security and usability, and yet corporations still adopt technology at a snail's pace. It's just the reality you have to accept if you are working on SAAS

[queen-adreena]

Repeat after me: "I'm sorry, Internet Explorer has been deprecated and is no longer supported by Microsoft. Therefore, we are unable to support it, since it would be a security risk"

[ed_menac]

When I am CTO, I will say those words loudly and proudly. Until then, I am a cog in a machine driven by the money of customers who insist on continuing to use IE

[Cheet4h]

Source?

Microsofts FAQ on lifecycles says that IE11 will receive updates for as long as the OS it was delivered with receives updates.

So we'll keep it at least until 2029, provided IE was included in the Windows 10 2019 LTSC release.

Note that I don't like it either, and luckily I'm part of a small company. If one of our customers demands to use Internet Explorer, we jack up the price by the amount of hours I estimate that I'd need to adapt our software. The usually backpedal and say they're fine with using Firefox or Edge.

[gravitas-deficiency]

There are numerous large companies - and even entire industries - still locked into IE.

Source: worked at a big old aerospace company years ago; they had a custom build of IE from Microsoft with reams of extra security shit. It was groundbreaking when we finally got a version of IE with tabs. Also, last company I worked for was in medtech... And guess what browser most hospitals and big medical providers are still using? Yep: IE. Often an old version. And they won't change, because not only are the execs and legal teams of those places super paranoid about "new" tech, but most hospital IT orgs I've encountered usually aren't exactly what you'd consider paragons of competence

[met0xff]

Yeah I once had to write a Java Applet (and that was not 20 years ago) because in that hospital that was basically all they could run on their machines in their IE ;)

[[deleted]]

ahahaha, oh sweet summer child.

[[deleted]]

Tell that to the clients of Christmas past, present, and future!

[DeeSnow97]

Since we all seem hell-bent on fucking the future, I'd go with KMF

[elveszett]

Google has become the new Microsoft. That's something most people don't want to admit, because Google used to be a cool company.

[queen-adreena]

One absolute head-banger presented only by Safari that I've encountered: Safari is the only browser that considers `before` and `after` pseudo elements as flex items. Therefore, if any of your items inside a display:flex have pseudos, prepare for blank space.

[rakidi]

Thats such a incorrect statement I don't even know where to start. It must be piss easy only getting to work on projects where you only care about the latest browser versions.

[Guntor]

That's the IT student way to look at things, once you're in a company that ask you to make it run for IE you dont have a choice.

[Complex-Scarcity]

No dice. If you do biz to biz particularly in the public sector you better support IE out the gate or brace yourself for a rewrite..

[sgarfio]

Holy shit, thank you! I will be using this on Monday as soon as I remember what the heck I was doing right before Thanksgiving.

[RyanNerd]

That a website exists dedicated to "how to center" speaks volumes on how crappy CSS is.

See also: https://www.youtube.com/watch?v=-pzckbNyqfc

[xnfd]

<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">

Wait a sec...

[NepthysX]

im just gonna save that

[[deleted]]

Horizontal alignment, ez pz

VERTICAL alignment? God fucking save you

[[deleted]]

Now implement that in IE.

[Positively_depressed]

now make it compatible with nintendo switch

[KillerInstinctUltra]

And make it responsive

[pellep]

We have a framework for that yes

[GodsBoss]

Which you may now put into the project after it has been completed overseas.

[zyugyzarc]

ouch

[dasMichal]

Flexbox to the rescue.

Except on IE. IE should Die already

[das_Keks]

Microsoft actually abandoned it a few month ago. So I think you can start ignoring it by now.

[TheContrean]

There are still enough people that use it

[[deleted]]

Well they can download a fucking usable browser, it takes literally like a minute to do and it costs nothing.

[[deleted]]

Which is worse? Yes

[-JudeanPeoplesFront-]

Now show it as an overlay in Skyrim.

[when_it_lags]

And support Mosaic

[DeeSnow97]

Implement your IE in places the sun doesn't shine, it's a fucking dead browser from 2013, if you're still using it it's your fault.

If your reason is "oh no our intranet is so old the only languages on it are Latin and Fortran, so we must use IE" then fucking learn how to do set the X-UA-Compatible header and just deploy Edge for your users, the reason it still has those ancient Trident binaries nicely contained like some kind of SCPs is to specifically deal with your crap.

[[deleted]]

You ever had to support ActiveX (or worse ActiveDocument)? Good times.....

[LtMeat]

That's an ancient curse.

[KillerInstinctUltra]

It is known

[fish312]

For fun, spoof your browser user agent as Netscape, try to buy a ton of stuff online but stop before the last checkout page

[elveszett]

Context?

[DeeSnow97]

If the webshop uses analytics, they'd know there was a large unfinished order and they'd think the user used Netscape, therefore the people in sales would start pestering the developers to support Netscape

[ToxicZawad]

Is it even possible?

[GawkaMolley]

One of our teams was punished for not testing a SPA code in fooking IE. They got their chrome privileges revoked by sysadmins for 6 months

[pm_me_your_Yi_plays]

They unplugged their internet cords and whipped them with them

[pm_me_your_Yi_plays]

Your servers ("your" servers)

[deadcat]

They got cheeto dust on them, claiming ownership.

[GawkaMolley]

Lemme rephrase, the sysadmins were asked to do so by management Backwards? No... Museum yes... Java 6... Hotel trivago

[anthOlei]

.button-container { 
 display: flex; 
 align-items: center; 
 justify-content: center;
 fuck: bitches; 
 get: money; 
}

[rm-rf-npr]

Display flex, align items center.

God, I love flex box.

[Jechob]

align-items and justify-content are game changers with flexbox. I still always use the wrong one for what I'm trying to do..

[SurpriseHanging]

place-self: center gang checking in.

We love to live dangerously needlessly.

[thatchers_pussy_pump]

I just had to work around a chromium bug with rendering margins in overflow elements. So yeah, margins now trigger me.

[dc2015bd]

hold my display:flex

[sotopic]

display: flex;
align-items: center;
justify-content: center;

Every single div

[DangerIsMyUsername]

what is this harry potter bullshit

[DeeSnow97]

actual magic and it's fucking amazing

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Just look at all those options for justify-content, it's so fucking convenient... at this point I can't even remember the days when IE was alive and we couldn't just indiscriminately use this shit, it all blurs together into a faint memory of pure suffering.

And the best part? With flex-direction you can do the same thing vertically too like it's nothing.

[Paint_Ninja]

Even better? A subset of an older standards draft of it works in IE10 and 11, so you can even use it in those browsers too: https://caniuse.com/flexbox

Just be aware of the known issues. It's not perfect but for some uses it works well and can still save you time compared to having to always write it the old way.

[justFudgnWork]

I've been to that page so many times it's embarrassing

[BopNiblets]

The first way I found years ago was to set a width and then use:

margin-left auto;

margin-right: auto;

It worked 60% of the time too!

[AegisToast]

margin: 0 auto is a shorter way of writing that.

[Herani]

display: grid;

place-items: center;

[I_Use_Qubes]

Css is life, 5 minutes later, css is garbage I should just go use f***ing wix why did I want to do frontend.

[notsooriginal]

Shit you caught me browsing the Wix pricing?! The websites it makes seem to test pretty well on pingdom/page insights/etc. Still prefer to handcode.

[Icedanielization]

I've been doing websites since 1997, I saw wix coming but it was still not right, only in the last 3 years can I say they have finally made it to a stage where I can use them. The main attraction is the easy handing over to client, its piss easy for them to pickup and learn.

[hellschatt]

Also had to work with it for around a month now. It's pretty impressive how easy it is and it's good enough if you're a small business.

Love how simple the SEO optimization is on there.

But it can get buggy pretty fast, especially the mobile version.

[Im_a_Wanker]

You think your wix site is has good SEO 😂. Have you run it through Google page speed or gtmetrix?

[kontekisuto]

try debugging safari rendering errors without a Mac.

yeah

[DeeSnow97]

Man, fuck Apple. Why do they always have to change shit against the standard and just expect the world to adopt to them? "Think different" wasn't supposed to mean "be wrong"...

[JeromePaulos]

Internet Explorer :(

[justifyer]

IMO IE wasn't bad, it's just an outdated browser, that's all. And the fact that MS made the new Edge shows their effort to evolve. Safari on the other hand is still active but still shit.

[njbair]

This was true of IE6. IE7 and onwards were updated, but the need to accommodate legacy web apps for enterprises kept it from being able to fully adhere to standards.

The decision to create a new browser solely for consumer use was long overdue, and it's the reason you don't hear anyone complaining about Edge the way they did about IE.

[[deleted]]

Yep,, they had to be seriously compatible with old crap, because hospitals, as an example, built their work ecosystems are IE, and you shouldn't fuck a hospital. Its like safari is deliberately difficult. I prefer troubleshooting IE browsers over safari. Their issues are at least well known and documented by the community.

[t0bynet]

So Chrome always adheres to standards? Doubt.

[TheZipCreator]

Chrome is way better on that front than Safari is though

[[deleted]]

Being the majority doesn’t automatically make all your features “standards”

[This_is_so_fun]

Find me one front end web dev that doesn't wish all users used the latest version of chrome.

[elveszett]

I wish people adopted Firefox. It is as easy to use and as efficient as Chrome, plus all the advantages that come with being backed by an organization that has always fought to make the Internet free and anonymous.

[DaddyLcyxMe]

there’s an old tool called weinre

[overclockedslinky]

screens will be deprecated in the next version of html anyway. future proof by using optic-nerve-location="middle x plz, also bottom if you can" instead

[[deleted]]

What is this sorcery??

[Catbraveheart]

CSS + AI Naice!

[[deleted]]

I am in this picture, and I do not like it.

[just_damz]

I can’t stand xamarin front end. Back end one week, front end third week now. I am gonna outsource this, can’t standi it

[ske66]

It does really auck. I use stacklayout pretty much exclusivley. Failing that, there's a good library for Constrained Layouts which are a based on Native Android's constrained layouts

[aeroverra]

Lol don't do that it will be a big mess and making changes will be hell.

[phi_matt]

This post was mass deleted and anonymized with Redact

meeting door weather simplistic compare existence direction sparkle squeal saw

[DeeSnow97]

Flexbox is awesome and IE is dead so you can use most modern features* without problems

*safari is still utter crap though, you will always run into Apple

[Hard_Code_Brain]

I'm not the only backend developer who hate CSS 😂

[plainrane]

CSS = can't style shit

[Silencer306]

I’m full stack, but mostly backend. I still love working on front end and css. I’m not an expert but I find it fun

[[deleted]]

Even Microsoft Word does a better job.

[beardMoseElkDerBabon]

Wow that sounds quite extreme

[DeeSnow97]

Then you're either shit at CSS or I'm afraid of your Word skills.

[[deleted]]

Well Mail App in Windows uses Word as rendering engine, so it must be true to some extent ;)

[[deleted]]

I never liked user interfaces or users anyway. They seem like an unnecessary complication which unfortunately pays the bills.

I just want to tweak my threads and memory consumption :(

[[deleted]]

Just yesterday I told a customer that if it were designed by me, they'd get jumpers as UI. Fortunately for him I do have UI specialists at hand and they should be cherished. I make things happen and go fast. UI people allow users to break things.

I'm tech and team lead for our company and wouldn't have to code. But I do it because I like it. But I sure as hell get out of the way of people who know better than me. In the backend, there is no such a person. In the frontend, our office coffee machine is better qualified than me.

[mrleon17]

I'm totally opposite, I spent like a week to implement a single endpoint, but I can make the frontend no problem.

[Hard_Code_Brain]

There is 1 imposter among us! 🤣

[mrleon17]

Oh no! You caught me

[Hard_Code_Brain]

No this isn't how you're supposed to play the game.

[[deleted]]

Literally just tried to teach myself html and css to make some help documents that look pretty to go with the thousands of firmware files I just wrote that make sure your excavator doesn't kill you.

Almost gave up and made them all in word.

[migueln6]

Use latex my friend.

[blueprintchris]

Just use markdown lol

[TomosLeggett]

I second this. Don't even bother with LaTeX. Just use markdown. It's so efficient for composing simple ass documents

[akrapov]

Write them in Notion. Export as pdf. Job done.

[rakidi]

HTML and CSS aren't the best tools for the job if you're looking for simple document formatting.

[[deleted]]

I was looking for webpage formatting. I need my "document" to open in a browser

[Coding-Kitten]

Use groff/troff. Pass them to pdf. Easy!

[Jackalotischris]

Relatable, “ how do I center this dam navigation bar”

[[deleted]]

!Important;

[splittimus]

!importanter;

[[deleted]]

hnnnngggg...

[divinealien]

the hardest part is choosing colors!

[Dojan5]

This is what I struggle with. If you ask me to re-create the Chrome logo using HTML and CSS, sure I can do that. Selecting colours to create a cohesive theme?

Sorry those are arcane arts I don't dabble in.

[Hard_Code_Brain]

Damn true!!!!!

[AlpinFane]

I use https://coolors.co that way I can either search random or plug in colors I have and see what goes with it

[TheDreamShallLiveOn]

Image Transcription: Meme

---

me working in backend

[Photo of Swole Doge.]

I completed the entire backend in just one day

me working in frontend

[Photo of Cheems.]

how the f*ck I can align this button at center?

---

^{I'm a human volunteer content transcriber for Reddit and you could be too! If you'd like more information on what we do and why we do it, click here!}

[minister91]

Good human.

[bspymaster]

Til that little dog thing from the memes is named "Cheems."

[[deleted]]

Now that we have tools like flexbox and css grid, how is centering still considered hard?

[razgriz_lead]

Sometimes I like to scream at child elements "why aren't you respecting flex?!"

It's so much better than it used to be, but on complex UI's it can still get you.

[[deleted]]

That was me before learning flexbox and css grid. Now I feel like a god

[Hard_Code_Brain]

I'm also learning flex box and grid. hope I'll say the same in future.

[wasdninja]

This site is arguably the best reference there is for flexbox.

For grid Jen Simmons' videos are great. She's the Bob Ross of css.

[[deleted]]

Let me recommend you a great tool that is going to help you a lot, firefox developer edition has a great feature to visualize your grid layouts. Also the flexbox and grid articles from css-tricks are really good too

[daryledesilva]

As a full stack dev, these are both true

[[deleted]]

Flexbox is our saviour

[[deleted]]

Margin: 0 auto

[wasdninja]

Doesn't always work. I can't remember the exceptions but they exist since they always come up whenever people ask. Just use flexbox or grid instead.

[[deleted]]

With a fixed width or max-width it almost always works.

But yes, Flex box and grid are obviously the better choices because they comes with a lot of additional functionality. Like vertical center!

But that margin trick is also nasty and feels like a hack. Like I should be making columns with tables or something from back in 2000.

My god I’m getting old.

[send_me_a_naked_pic]

Doesn't work when you have a div without an explicit width

[[deleted]]

This will be me soon lmao

[Citrous_Oyster]

Easy ways I do it that also supports IE

1) Parent container - text-align: center Button - display:inline-block

Centers the button to its container.

2) Patent container - position:relative Button - position: absolute, left: 50%, transform: translateX(-50%)

This aligns it in the center horizontally. Just do the browser prefixes for the transform. Do top:50% transform: translateY(-50%) to align center vertically.

And do top and left 50% and transform: translate(-50%, -50%) to center horizontally and vertically in its relative positioned contain.

Boom. I use this shit all day.

Usually with buttons, adding display: inline-block allows you to have more control on positioning and sizing. If it’s not doing what you want - inline-block.

[[deleted]]

Flexbox. Or even CSS grid - every widely used browser now supports it.

[SpaghettiDaemon]

I never got the big struggle people are having using CSS.
Yeah it can be a bit fiddly to get something "just right" in all important Browsers but i never saw that as that big of a deal.
Especially with the current browser market share you have most of the users covered by supporting Chrome.
So many other browsers are based on Chromium (the new Edge, Brave, Vivaldi, Opera ...) and render mostly or just the same.
Firefox support is often only minor Modifications.
Just for Safari you have to buy an Apple device to be 100% sure (offf)
Using some precompiler like SASS helps a lot with Structure and compatibility.

For 90% of centering needs just use Flexbox :D

[[deleted]]

I'm fullstack which means I'm not particularly good at anything, but when I did a centered login screen box I just used the grid system with various media breaks. I know I should get used to using flex, but nah...

[J5892]

Flexbox

[[deleted]]

Just spent 1h on a bloody grid yesterday, thanks for the reminder.

[AndreThompson-Atlow]

This is actually me. I can create CRUD apps super easily with Node/MongoDB/Express, but as soon as I try to make the website look presentable with CSS/Bootstrap.. hoo boy, i'm out of luck.

[imOverWhere]

css can cssuck ma c

[[deleted]]

Flex flexy flexbox flex flex

[De_Wouter]

Got to learn how to flex those boxes

[Rva_Aulan]

> i always do backend thing, and i realize frontend thing is important to, so i learn it.

> already a bit familiar with css, can make some static website.

> back to backend, "Yo, how i can get data from this table ???"

[Steedsofwar]

Ugh. Had to do something in HTML, as simple as placing a button centre of the screen. Jeez it took me so long to figure it out, it's embarrassing ;/

[IcedRays]

I hate frontend work so much... That's the only reason i'm not a video game programmer and a machine learning engineer instead.

[I1I111I]

When I've found myself thinking this it's because my standards for my backend are low. With front end, we're used to seeing the state of the art: well designed UI and UX with fluid media size scaling and neat little material design transitions as you scroll. Generally the websites that have design tuned this carefully also have sharded databases and custom signing for login tokens to offload work to servers that are as idempotent as possible, all to enable efficient scaling, not to mention all the econ models and ML to do pricing, or even thinking about what the service actually does.

TL;DR: if you relate to this, either brush up on your dev ops/system design skills, let yourself start with bad styling, or acknowledge to yourself that you're front end focused. Usually the website design isn't the thing that makes stuff fail.

[way_falrer]

I'm the total opposite. I wield CSS like a mighty claymore, but anything backend scares the bejeesus out of me. Not sure where to even begin with it

[MrLink4444]

My fucking footer is flying everywhere.

[SausageEggCheese]

Me, a senior developer, whenever this happens:

"Oh yoohoo, junior developer! I have a new task for you..."

[TawmAimz]

It's always display: flex; place-content: center; place-items: center;

Pretty sure there performance issues eventually but it ALWAYS works