Hacker News new | past | comments | ask | show | jobs | submit login
CSS grid garden (cssgridgarden.com)
426 points by based2 on Dec 24, 2018 | hide | past | favorite | 128 comments



This makes me sad. Not because I don't like grid. But because two weeks ago I found out that a very senior person in the company has a computer running IE11, and will not let IT upgrade her machine.

She recently discovered that one of the company's web sites doesn't look right in IE11, and shit ran downhill into my lap. I checked the logs, and yep... she's the only IE11 machine to hit any of the web sites in a year.

I spent a day and a half downgrading the site from CSS grid to Flexbox only to discover that once I found an old machine in a closet that has IE11 on it that I could test with that IE11 doesn't fully support Flexbox, either!

Solution: Each building on campus has its own IP address. Connections from her building get a table version.


The solution there is to document every moment of your time spent on this issue, alongside the user agent logs, and present that alongside your salary, and present it.

Best case, they decide they pay you too much and you cause too much trouble, and let you go.

Worst case they make her upgrade her browser so they're not dumping mountains of money on her preferences and whims.

Either way, I'd be good with it if I were in that position.


I already document every task I do (my immediate boss requires it).

The way I view it is it was good busywork for the weeks before Christmas when not much was getting done anyway. I don't bother fighting it because if they want to waste their money paying me to downgrade a web site for one person, I'm happy to take their money for it.


Chances are if IT upgrade her browser she won't even notice. Just get them to do it.

Or get someone more senior than her to put her in her place.


Just get them to do it.

It's not a tech company, so it doesn't work that way. IT doesn't tell management what to do, it's the other way around.

get someone more senior than her to put her in her place

To get to someone more senior than her would mean contacting her manager on the other side of the country, who would likely wonder why I'm was wasting her time, and come down on me through my boss. Again, it's not a tech company.


> It's not a tech company, so it doesn't work that way. IT doesn't tell management what to do

No, but IT come and say "in order to get ISO313186461 certified we need to do an upgrade" tends to work pretty well.


it would be a shame if something happened to her computer and it had to be replaced...


“What’s this in my computer? What’s a USB killer?”


Highly unethical


you're not going to enjoy Bastard Operator from Hell


I enjoy Quake but not Quake IRL


Hilarious that the HN audience decided that the parent comment was worthy of down-votes! Ethics? Pah, we're IT professionals.


Ethics swing both ways.


I wasn't saying it doesn't. I wasn't saying anything remotely like that. Someone was downvoted for the normally unremarkable observation that intentional sabotage is unethical. I thought that this community response was hilarious and worthy of remark.

If it "swings both ways," I would be most interested in an opinion about the "other way" if you're willing to offer it.


"IE11 is not supported.".. why? it's something technical...

IT might be lowest in the foodchain, but they always have the last word when it comes to something.. technical.


> who would likely wonder why I'm was wasting her time

At which point you show how much money is being thrown away here.


This is somebody who successfully refuses to let IT upgrade her computer. That means she has a huge level of power in the organization and feels entitled to disregard policy.

Do you honestly believe she cares about the IT department wasting a little bit of money (and it really is just a little bit relative to what she probably deals with), or would respond well to an IT guy pointing out his salary in an attempt to convince her to upgrade her computer? The advice you gave is more likely to get someone fired than it is to help.


She seems like she's an easy attack vector into the company network. Is her computer also completely firewalled off from anything important or does the company not care about breaches?


Either that or “IT” is someone who doesn’t feel qualified enough to be assertive in their position. If I was this “IT” person, I would explain to the individual that there was a critical vulnerability found which will not be patched and then print up a liability waver form for them to sign and date, stating that they are doing this on their own terms and I cannot be held responsible should anything go wrong.


> If I was this “IT” person, I would explain to the individual that there was a critical vulnerability found which will not be patched and then print up a liability waver form for them to sign and date, stating that they are doing this on their own terms and I cannot be held responsible should anything go wrong.

That's even worse advice than what I was responding to. Great way to anger a high-ranking executive and probably get fired.

Frankly a lot of the advice in this thread seems to be coming from people who are very junior or otherwise don't have experience dealing with high-ranking executives. Heck, even mid-ranking executives would respond very poorly to the kinds of actions advised in this thread.

Here's the situation: a high-ranking person in the company is so powerful that she can disobey IT policy by refusing to update her computer. This person is also powerful enough to demand that changes be made to a corporate website to make it compatible with her older computer. This is a problem for the head of IT, and the head of IT either lost that battle or decided it was not worth fighting.

This is not the right place for a more junior IT person or developer to stick their nose in by going directly to that executive with some bogus "liability waiver" or appeals to wasted money or whatever else. It won't go well, and it's wrong to do it in the first place because it bypasses layers of management and the historical and political context that led to this outcome. If the head of IT couldn't solve this problem, a stunt like what you are suggesting won't solve it either.


Your advice is worse. Situations like this are entirely a game of dick swinging. If the IT department wants to become a room of ineffectual little shrinking-violet yes-men, then why would you want to work there in the first place?

I get what you're saying, and I think that most corporate IT departments run themselves as little fiefdoms with false pretensions of importance and power. But if someone is insisting upon running systems that don't conform to reasonable standards of the company, then something needs to be done. I would consider requiring that device to be isolated from the network with a small firewall.

But the waiver is a good idea—though unlike your assumption that it would be handled by an junior, such matters ought to be sent up the chain to the CIO or equivalent, and it should be the responsibility of the CIO to get the signature or take personal responsibility themselves.


While I agree that some of these approaches are too agressive and this should first be approached with an honest conversation, I completely disagree that people should just stick to their role and shut up even when they see problems.

Sometimes you need to break the chain of command (either from below or from above) to get things fixed, otherwise some problematic people never called on their shit and the whole organization suffers.


Go back up to the start where I said that the best case was that you get fired.

Either you make progress or get... encouragement to go find a better job. Sounds like a win-win to me.


> Either you make progress or get... encouragement to go find a better job

This assumes one has a job where you can easily replace it with an equivalent. Even in IT, this is not the norm outside of a few limited areas and fields. Most people have to worry about keeping jobs that arent perfect.

Frankly, this is the kind of "if it were me Id just be an asshole because being right is the only thing that matters, just don't look at my actual life actions" advice I got from my grandfather growing up and just sounds very unaware and privileged today.

Does it suck? Yes. Is there some act this person can do to change things? Maybe. Are there a lot of actions that can feel morally justified but arent, and are also really bad ideas to attempt? Oh my yes.

Do I think you are offering this terrible advice? Cant say...there's a lot of context we can be assuming differently. I can say that I dont see the take away from many of the messages on this thread being terribly helpful.


At which point you show how much money is being thrown away here.

You assume that wasting a few days of my time will cost the company more than me wasting her time. Remember, this person is probably seven or eight steps higher than me in the org chart. This is a large organization, not some startup.


If you are spending days, and the person is spending 10 minutes, that might actually work out in your favor.

Also, 7 or 8 steps in any org chart is insane.

It’s more likely to cost a ton of money if someone hacks her browser/OS though.


Better to ask her why she feels she needs that version and work with her to move beyond it.


Has anyone asked her why? She may have a legitimate reason.

From personal experience for a long time I had to keep an old version of IE running in an old windows VM for one specific app. Had I not had that VM and IT decided to upgrade me without asking I’d have lost my sh$& and gave them the what for.


We just finished deploying a major contract where the military is a primary customer. They still have many machines running IE 11. I used CSS Grid and it's working well. IE 11 supports the initial version of the spec and has the -ms prefixes, but works. There are some things you can't do (like areas), but it largely works with that syntax, if you design with column/row in mind.

See this for details on the IE 10/11 implementation:

https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...


Former soldier (national guard) here, and yes, yes they do. You know how aids it is to be a civilian software engineer and have to work with IE11 to complete assignments. The good thing is that 95% of the time I could convince their software to give me a certificate without completing the course on stuff like OPSEC (yes, I am aware I shouldn't share my password with others). Guhhh.


Its a general government thing. The amazing power of contractors to determine what systems their precious software will run on is amazing. I have a Windows Server 2003 machine still on my network because of a grant contractor that hasn't certified anything beyond that.


> [...] only to discover that once I found an old machine in a closet that has IE11 on it [...]

MS has free downloadable virtual machine images to help with that kind of testing. They have IE8, IE9, IE10, and IE11 Win7 VMs, an IE11 Win8 VM, and an Edge Win10 VM.

They have images for VirtualBox, Vagrant, VMWare, HyperV, and Parallels.

Link:

https://developer.microsoft.com/en-us/microsoft-edge/tools/v...


I tried one of these in VirtualBox on an iMac, and it crashed the computer. Hard. Like locked it up, and after three minutes frozen the thing rebooted. That was when I went searching for an old machine in the IT building.


If possible you could alternatively have send her (every browser which doesn't support full grid) a mobile layout like described in the video: https://www.youtube.com/watch?v=txZq7Laz7_4&app=desktop

> From this follows a simple but surprising truth: The lack of support for CSS grid in an old browser should not affect the experience of the visitor, but rather just make the experience different.

> If you agree with this (and you should), there is no reason you can’t use CSS grid today!

> Here’s how that approach could work in practice. Rather than using fallbacks and shims to ensure a design and layout look the same across all browsers, we’d provide the mobile vertical single-column layout to all browsers and then serve up advanced functionality to those browsers and viewport widths that can take advantage of them. It might sound like progressive enhancement, but it’s actually more of an accessibility-centric approach enabled by a mental shift.

https://www.smashingmagazine.com/2017/06/building-production...


One pattern I've heard (I think previously via Hacker News) is to start with a mobile design and progressively enhance the site for browsers with grid support. That way, older browsers fall back to the same experience as the mobile design.


caniuse.com is a quick way to look up compatibility issues, e.g. https://caniuse.com/#search=flexbox


You're right, I should have checked. But in my mind it never occurred to me that the final version of IE could be that broken. Lesson learned.


Maybe displaying it in table Layout for all IE11 users would be a better solution.


Interested to hear what flexbox features were unsupported? I’ve been in a same kind of situation but was able to support everything on “IE version” of the app by using flexbox.


Most of flexbox is supported in IE11, but some "defaults" are not the same as other browsers --> see the known issues tab if you're interested, most of the time it works but when it doesn't it's frustrating https://caniuse.com/#feat=flexbox


Its been too long for me to remember the details but I remember flexbox 90% working but having some bugs that were a huge pain to work around. Its at the point where you can use flexbox on IE but you have to specifically test each use on IE to make sure it works.


Biggest problem is that most people use the sort notation while the long notation is supported in IE-11 for flexbox.


I've got a similar situation with a web app millions use, but a couple corner office people use IE11. We were able use an IE only CSS selectors to degrade; in theory you could do the same without compromising the layout for other users.


whoa. tables seem like a overkill. something you did back in the IE5 and Netscape days. i would recomend using ei snippets that let you specify css rules that will only run on that version of ie. which have been available since ei 7.


IE 10 supports an ealier version of CSS Grid Layout: https://blogs.msdn.microsoft.com/ie/2011/04/14/ie10-platform... or you can use a polyfill: https://github.com/FremyCompany/css-grid-polyfill/


I was playing with CSS Grid at work 2 weeks ago...but it didn't look right on my work PC. I was running IE 11. IE 11 has some specific tags for CSS grid, and they don't work like other browsers.

I went home to build something personal and thought CSS Grid would be awesome. Turns out my PC runs IE 11 (Windows 7...). I personally use Firefox Quantum for all my web browsing, but the fact that I had it meant there would be good enough amount of people that have it. At the point I gave up on CSS Grid, and just threw in bootstrap.


I wish I was in your position half my company still runs IE 11


that would make me look for a job elsewhere right away


We are spoiled by the abundance of job opportunities.


I guess I would have just wrapped ie specific css in a conditional.


I prefer using user agent sniffing and adding the class ie to body. With autoprefixer you get a lot for free too.

But I do have a certain fondness for wrapping modern layout in @supports(display: block) {}. It's kind of like a hidden fu in the code. Additionally it has lower specificity than body:not(.ie) &.


Why not make the version you send to her the default experience, then progressively enhance with flexbox and grid, while only iterating on the grid version?


Of course you now present her with some annoying popup boxes and captchas every time she uses the website? >:)


I did the exact same thing for a corporate client who had one room of machines running IE5.5 back in 2004-5.


ah, post-google chrome developers.

Most people here will be too young to remember, so let me tell an old-people tale of when everyone used Netscape (which cost $29.99 ...let that sink in first of all), and then microsoft gave IE for free for everyone! Then webdevelopers without a true CS background (and by that i do not mean university), like yourself, started to use IE niceties to develop. One of those niceties was the F12 developer tool. Which now become the every-browser's-dev-panel. And they cursed at everyone that was still using Netscape4 instead of their fancy new IE6. So much so they put buttons on those sites saying "better displayed on IE6" (or 4, don't remember).

I am tired of typing now. So have fun figuring out the moral of the history. I is my cristimas present to you :⁎


Navigator was free at first; Netscape's idea was that the money was in the web server. Free (that is, initially price-matched) MSIE just made changing strategy different when the server thing fell flat. Netscape going all in on JSSS (with a half-assed CSS translation module) didn't help at all, nor did strict hierarchical access paths (no "all" collection object, which also affected how the CSS-that-was-really-JSSS worked)... and missing the idea of background requests (XMLHttpRequest) sealed the deal.


was it free at first? I recall wrong probably. assumed it started as shareware and went free after IE. might be thinking of winsock.


Run your CSS through an autoprefixer to target IE11. Done. What's the big deal?


This couldn't be more timely. I was just thinking maybe a day or so ago "It's probably about time I sit down and learn CSS grids." Love the format, thanks for sharing!



Nice job! I had a strange feeling I had seen this before.

That being said, I love the concept. Fun way to get some practice in!


Curious as to why CSS Grid chose to start at 1-index rather than zero, and why the end column is one more than the position of the column that actually stops.


Probably because all of CSS uses 1-index (ex: :nth-child)


Correct answer.


Ultimately these are just conventions. There are probably good reasons for them, too. For example having [a,b)* allows easier computation when you have things that abut. E.g. it's [a,b) [b,c) [c,d) rather than [a,b-1] [b,c-1] [c,d-1].

* https://en.wikipedia.org/wiki/Interval_(mathematics)#Includi...


But it seems to be weirder than that, according to the game (can someone explain this to me?):

start:1, end:4 = 1,2,3 (start-inclusive, end-exclusive)

start:5, end:2 = 2,3,4 (I guess this means right-exclusive, whether it's 'start' or 'end'?)

start:1, end:-2 = 1,2,3,4 (the puzzle text says -1 is the first grid-line from the right, i.e. 5, but that doesn't follow, because now it's right-inclusive)

start:-3 = 4 (so -1 is grid count+1, which explains the above?)


I'm with you, this feels very weird to me.

Usually you get a reasonable relationship between zero- and one-indexed views of the same thing. The relationship is normally that the zero-indexed points 0 and 1 form the start and end bounds of the 1st item.

CSS grid numbers columns 1, 2, 3 and also number the the lines around those columns 1,2,3,4. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...

Having grid line 1 come before column 1 makes it feel like the grid lines are substantial and the columns are merely the bounds between grid lines.


> Having grid line 1 come before column 1 makes it feel like the grid lines are substantial and the columns are merely the bounds between grid lines.

Correct. And IIRC the spec doesn't even have columns (they're just referenced to help understanding), just column bounds.


Isn't there some presumed universal convention for how to index things, present in the most popular programming languages, that avoid all of these issues that would have really easy to code?

I feel like I'm spending my time doing the wrong things ... I should have been arguing for sensibility during the standards writing. These modern css things are only here to make things easier, not more wonky and strange - we already have that. If they're just dedicated to inventing new bizarreness to replace the older wackiness, where have we actually come?


Maybe designers don't have a culture of counting from 0 like programmers do?


There are programmers who don’t count from zero. And even programmers who count from zero but don’t do so consistantly as soon as they implement even the simplest personal indexation.


Programmers don't count from 0. Its just in many languages it makes sense like in C where an arrays name is actually a pointer to the first element and the index says how many positions to move away from it so foo[0] is the pointer to the first element and then move 0 spaces away.

The tradition of starting at 0 just got carried on to everything because having a standard is better than having to memorize what everything uses


There are good reasons to start counting at 0 beyond convention. Dijkstra wrote a small essay on the topic in 1982 called "Why numbering should start at zero."

http://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EW...


As someone that started programming in languages that count from 1, I kind of disagree with that essay.

Specially when dealing with Algol derived languages, where the indexes can be specified in a flexible way.


> why the end column is one more than the position of the column that actually stops

The positions are, I believe, the positions of the grid lines, not the grid columns.


That still seems super unintuitive to me, because the whole thing is ‘grid-column-end’, not ‘grid-column-line-end’.

Between this and how weird the negative syntax operates, I suspect that I would end up using the start/span syntax the most, but my company requires code that supports IE9, so I will probably only touch this on a regular basis in like five years.


I really hate products where the in/out points are not the same inclusiveness. There are several video programs I've used in the past that are similar to this where the in-point is inclusive, but the out point is not. If the in/start designates the first thing I want to include, then I would expect the out/end to also designate the last thing I want to include.

It's just a mild thing to get over, and visual tools like this make it very easy to realize the end is exclusive. However, it is not always so easy in video tools unless the next frame to your out is an obvious change.


There's an extra difficulty with something like video software.

Consider what the expected outcome would be for "isolate from second 1 to second 10". Then the expected outcome for "isolate from frame 1 to frame 10".

What happens with a video at 1fps?


Now we're getting into definitions of "what is 1 second?", and I always reply "a second is a second, regardless of the divisions". Same when syncing audio to video. Straight audio is just a division of sampling rate, so regardless if you record video at 24,25,30, etc, audio recorded at 48kHz is always the same. It only gets confusing when trying to force sync by embedding timecode into the audio or laying the audio to a video format. Now, you're trying to subdivide the audio into video frames, and that's just going to make framerate conversions difficult. My biggest pet peeve with this is all of the MP4 based capture formats where the audio alignment is within +/- frames. I love frame advancing to the clapper in the clapped position, but the audio pop is frame(s) ahead/behind, and sometimes even sub-frames ahead/behind. It's one of the things I miss the most about FCP7. I could option-click the timeline and slip the audio into alignment with the video. Premiere doesn't allow for this, and I refuse to even install FCPX to investigate. I know just make it the audio department's problem ;-) Wow, I just jerked the wheel so hard far left from the actual topic.


Is there a more legible version of this that's not grey on oh-so-slightly lighter grey?

I'd love to use it but I was looking at the grey box for about 3 minutes before I realized there was text in there.


You can use your browser's inspector to change the CSS for the background and/or text color of the box. There aren't any page loads between exercises, so it'll stay changed as you progress.


Attempting to use grid-column-end: -1 works visually in the watering example, but won't let me move forward.

EDIT: Oh, I see. -3 worked.


nice. couldn't proceed till i read your comment.


start counting at 1 instead of zero, ok, its valid.

column-end means really "end+1", why?

problem: when you go from left-to-right: column-start-3,column-end-5: means column #3 is included

when you go from right-to-left: column-start-3,column-end-1: means column #3 is NOT included

So if you read "column-start-3" you don't know if column#3 is included or not, it depends on column-end.

"column-start-3,column-end-5" should include column 3, 4 AND 5

This is from level 10:

>For example, grid-column: 2 / 4; will set the grid item to start on the 2nd vertical grid line and end on the 4th grid line.

What's the correct interpretation of "start on 2nd and end on the 4th"? shouldn't the 4th be included?


I believe it's talking about the vertical lines, not the column space between them. So the "+1" is because it's talking about the rightmost edge of what you're calling a "column".

here's an image that may explain better. I numbered the vertical edges, start is green, end is red.

https://imgur.com/a/xCplwAt


This is definitely helping my understanding of the grid system, thanks to the author!

The only thing I would suggest is to add some explanations, maybe some mnemonic aids and such. I'd be happy to help.


Flex seems more flexible to me than CSS Grid.


My only major pain point working with flexbox have been gutters. With flexbox, implementing gutters often involves some kind of hack involving negative margins, which is both inelegant and can sometime result in strange layout issues in my expereince.

For instance, if you want to render a dynamic list of items that wraps if the number of items don't fit in 1 row using flexbox, and want to add equal vertical spacing to each row _only when the list wraps_ (i.e. without introducing any extra spacing on the first row), you'd need to add a margin-top to every item and then add a negative margin-top to the flex container to counteract that extra margin.

I originally found out about this trick in this StackOverflow question: https://stackoverflow.com/a/30891910. I'd love to be enlightened if anyone know of a better way of implementing this using flexbox.

Similarly, adding gutters for horizontal spacing between columns involves adding 1/2 the gutter width as margins to each item on both sides, and then setting negative margins of 1/2 the gutter width on both sides of the container.

With grid, we can simply set the row-gap and column-gap properties on the grid container without any additional ceremony.


Flex seems more flexible to me than CSS Grid

It's not an either/or proposition.

I sometimes use both at the same time, depending on the project. Usually it's Grid for the big picture container layout stuff, and then Flexbox for laying out each individual portion.

I'll be happy when another 15% of my visitors upgrade to better browsers so I can use grid on my biggest project. Right now Flexbox fails with orphan elements, even when using margin: auto;, but this would be a perfect place to use Grid.


They are complementary technologies. CSS Grid really shines for doing the "full page layout" portion of websites. One really useful feature of CSS grid is that it composes really well with media queries, so you can create responsive websites really easily by just defining different grid area layouts for various screen sizes.


They actually made another game to learn flexbox https://flexboxfroggy.com/


This is how I've learned enough flexbox to get by, and it was a total blast


A combination of both is really ideal. CSS Grid seems great for full screen things and FlexBox is really great at laying out small components.


Flex has better browser support though, so I still like to stick to Flex instead of Grid.


Is it just me or does everyone just eventually resorts to "trying everything until it works" with CSS layout?

> Flex seems more flexible to me than CSS Grid.

Any day :)


My first advice to anyone regarding CSS: Don't just slap on more rules to get things working. Gain an intuition and you'll be so much happier and produce much better layouts.

But yes, I am also under that impression.


Honestly, my experience with both flex and grid is that they are 80% solutions and the easiest ways to get the other 20% is to rewrite everything using floats and `display: block`


Agreed, since learning flexbox I haven't touched css grid albeit I've only done front-end for small internal tools and hobby projects recently.


I played CSS Diner in 2014. https://flukeout.github.io/

Grid Garden copied the concept.


I'm stuck at level 21. This didn't work:

grid-template-columns: repeat (8, 12.5%);

Am I doing something wrong or is it a bug?


That's what works for me, maybe take the space off after "repeat"


That's what worked for me when I did this a while ago.


check your spelling and where you have yours plurals. I spent a bit trying to figure out what I did wrong.


When is project G coming out? Been waiting forever to play that one


This would make for an interesting interview test for a front-end developer.


I feel like interviewing on something that is both extremely new and easily google-able is not the best idea.


Dupe detector not working as always https://news.ycombinator.com/item?id=18751976

Also you should check out http://flexboxfroggy.com/


On HN it doesn't count as a dupe if the story hasn't had significant attention in the last year or so. This is in the FAQ: https://news.ycombinator.com/newsfaq.html.

More explanation at https://news.ycombinator.com/item?id=16403654 and https://news.ycombinator.com/item?id=16344002.


URLs are different, so I'd say dupe detector is working as intended


There's no mainstream browser that doesn't suck (ie, they're all walled gardens) that supports CSS grid. Plus the other 4 billion people on Earth not in modern countries.


Use CSS grid with Flexbox for fallback.

I create my mobile version of pages with Flexbox, so if the user's browser doesn't support it, they see the full featured mobile view. Progressive enhancement.


Curious how you manage this. Do you use feature detection and then apply a class to <body>?


Not OP, but it is usually done by using support tags:

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

You'd write two versions, one for browsers which do support grid and one for the ones which don't.

Jen Simmons has written excellent tutorials on doing fallbacks and explaining how we can use css grids nowadays: https://hacks.mozilla.org/2016/08/using-feature-queries-in-c...

And also has a YouTube channel where she explains a lot on how to deal with css grid in the wild: https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag


I build all my mobile layouts with flexbox, so they are usually one long column, and content collapses into the grid from CSS media queries.

If the browser doesn't support css grid, the mobile, single column version with flexbox is fully featured, and is loaded first because the css grid is kept in @media queries.

Like the sibling comment mentioned, you can use @supports, however if you use `display: flex` for mobile and `display: grid` for desktop, the grid will never load in old browsers anyways.

This works out pretty well for me personally in 99% of use cases. If you want to use CSS grid as well for mobile, you'll need a more powerful @supports solution, however.


IIRC, Safari, Edge, Firefox and Chrome all support CSS grid.


Firefox supports it. You're aware Firefox is OSS right?


Firefox went walled garden in v37.

That said, at least this css grid garden has a elegant fallback. Most CSS grid sites don't. Or worse, they fall back to 'mobile' sites.


"Walled garden" in what sense?


The walled garden I speak of is the implementation of add-ons cryptographically signed by Mozilla only. Unless you run one of the betas (w/bugs) you cannot use any add-on not approved by Mozilla. And lately they've even been removing/banning add-ons that aren't illegal but otherwise upset outside corporations (ie, the paywall bypasser that uses googlebot's http headers substituted in).


It's important not to lump together the proprietary browsers (where the limit you speak of can only be worked around if the proprietors allow) and free software browsers which respect your software freedom, like Firefox.

You could modify Firefox source code to let you run whatever add-on you wish. With Firefox whatever changes you want are limited only by your willingness to implement them (either by doing the work yourself or working with others to get those changes made).

You can even distribute the improved Firefox variant browser to others and help the community. Hacker News recently had a story about some hackers doing exactly this with a variant they call Librefox. Other examples of Firefox variants include IceCat and the Tor Browser.


Is there a browser you would recommend, if we ignored their HTML/CSS rendering for a second, based on ethical considerations, so to speak? I like making things compatible when I don't need anything modern, and would be interested in hearing about any browsers you think are worth supporting.


I would be very interested in this as well. Especially as someone who makes silly browser extensions they never intend to publish.


Your definition of walled garden is pretty broad and includes all major browsers.


Well yeah, they basically said that in their original comment. Is it not possible for all major browsers to be walled gardens?


Is there a way to enable unsigned extensions at all, say from about:config?


You can either use the developer build or compile Firefox yourself.


Extended Support Releases do still include the flag: https://support.mozilla.org/en-US/kb/add-on-signing-in-firef...


No. The removed that in the low 40s versions.




Consider applying for YC's W25 batch! Applications are open till Nov 12.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: