nice squares
July 10, 2018 9:01 AM   Subscribe

 
Turned out 'inset' was a outline-style and a negative outline-offset can be used to inset outlines.

Sounds like the author was just out to make a tongue twister.
posted by entropone at 9:07 AM on July 10, 2018 [3 favorites]


CSS is capable of making you wish you could do layouts in Java Swing instead, and that should not be possible to do.

Screenshots of different browser renderings here.
posted by thelonius at 9:20 AM on July 10, 2018 [13 favorites]


Chrome: "This is some kind of weird fractal thing, yeah?"
posted by tobascodagama at 9:22 AM on July 10, 2018 [8 favorites]


A few years back I registered iscss3astandardyet.com and ishtml5astandardyet.com with the idea of pointing them to the same site in which a single static HTML file using a single static CSS file would render differently on everything used to access it. Basically this brief demo on a more bludgeoning scale. My idea never got any farther than that and I let the domains expire. Partly because shortly after getting the domains, WHATWG declared that HTML5 was to be a living, floating spec which implicitly guarantees implementation conflicts of something-or-another forever, and partly because I didn't have free time and the project interested me less than the idea did once I realized that this meant regularly updating the site in perpetuity, which would have been a chore for a single-serving one-joke site.
posted by ardgedee at 9:22 AM on July 10, 2018 [8 favorites]


Here I am, wondering what part of the code even is dictating triangles, and assuming that Firefox is the "most correct", but apparently different browsers have internal "style" that affects how certain elements are displayed?

How frustrating. I guess when one side wants "websites should be flexible to accommodate the browser," and the other side wants "my website should display exactly as I designed it, like a PDF," the compromise is "it's a giant mess that no one's happy with!"
posted by explosion at 9:34 AM on July 10, 2018 [2 favorites]


I'm on the side that thinks browsers should implement the spec, fully, and the spec should be unambiguously written.
posted by eustacescrubb at 9:38 AM on July 10, 2018 [5 favorites]


warning: this is how you invoke asalluxi according to simon's necronomicon

i am not at all surprised that css is satanic in nature
posted by Foci for Analysis at 9:42 AM on July 10, 2018 [7 favorites]


tl;dr - ardgedee found it practically impossible to maintain websites about how standards are always changing - because standards are always changing.
posted by johnca at 9:48 AM on July 10, 2018 [5 favorites]


is this like square sweets that look round?
posted by scruss at 9:52 AM on July 10, 2018 [3 favorites]


Good layout and visual design aren't easy.
They are hard. REALLY hard.
Especially when the layout and design have to handle literally any screen size.
And when the things that show the layout and design are all made by different companies, and some of them are 5-10 years out-of-date.
The language used to express good layout and design, by definition, can't be whiz-bang simple.

CSS is hard? Of course it is. It has to be.
posted by foldedfish at 9:56 AM on July 10, 2018 [5 favorites]


The problem isn't that it's hard, the problem is that it's bad.
posted by dilaudid at 9:58 AM on July 10, 2018 [12 favorites]


"my website should display exactly as I designed it, like a PDF,"

I mean, my website should display exactly as I designed it, nothing like a PDF. You can design for responsive, you can design for different devices, but designing for different browsers deciding to do completely different things with the same set of instructions is the ridiculous part. None of it is "easy", but one of those things is something that the webpage creator can actually have some control over and responsibility for, and one of them is just like, well, I HOPE that tomorrow Chrome doesn't push an update that turns our entire application neon pink and completely rearranges our entire layout, but I have no way of actually preventing it from doing so.
posted by Sequence at 10:01 AM on July 10, 2018 [5 favorites]


CSS, if properly implemented by browsers, would be amazing.

As far as I can tell, none of the browsers are correctly implementing the spec.

Safari comes closest to correctly implementing outline-style, but fails at outline-offset - IE, surprisingly, comes in second (it's at least trying to implement outline-style: inset) - the rest are total fails.

Chrome's implementation is bananas - not only completely failing to implement the spec, but also, completely failing to display anything close to what anyone would imagine it might require.
posted by eustacescrubb at 10:01 AM on July 10, 2018 [5 favorites]


That's it. It's time to abandon HTML and CSS and replace them with just serving TeX documents.
posted by biogeo at 10:12 AM on July 10, 2018 [15 favorites]


CSS, if properly implemented by browsers, would be amazing.

Counterpoint: under what unholy set of circumstances would you ever need outline-offset: inset and negative outline-offset to play nicely together? It's kind of like those Super Mario speedrunners who figured out how to manipulate the internal code pointer by messing around with sprites: yes you could design your application to stop them, but at a certain point, you're just coding to stop people from making, well, divs that look different in every browser. There's no possible ROI for chasing that last .1% of CSS2-compliance.
posted by Mayor West at 10:13 AM on July 10, 2018 [19 favorites]


the spec should be unambiguously written.

The spec can be written or unambiguous but not both.
posted by GuyZero at 10:13 AM on July 10, 2018 [35 favorites]


> I'm on the side that thinks browsers should implement the spec, fully, and the spec should be unambiguously written.

The second part (an unambiguous spec) has been the gotcha all along. Even if the major browser providers had done their work all this time in good faith (ha ha), there were always going to be divergences in interpretation because writing a spec that's clear and precise is haaard. People love to dunk on ISO for taking for-freaking-ever to specify a thing, but that's because they're aiming for concision and accuracy (in multiple languages). The W3C, bless their souls, couldn't manage clarity in any of their HTML specs, and deciding at some point that HTML was simply a subsidiary dialect of XML made things worse (with consequences we are still paying for). The WHATWG are kind of picking up that tradition by making precision in specificity take second place to change. They've done a lot of good, but there's a point at which the language has to be declared mature, and then the hard part -- making everybody agree fully on what everything means -- will start.
posted by ardgedee at 10:29 AM on July 10, 2018 [1 favorite]


Counterpoint: under what unholy set of circumstances would you ever need outline-offset: inset and negative outline-offset to play nicely together?

One could imagine that CSS could have used types to prevent nonsensical combinations, but everyone wants the web to Just Work so anything involving the web is completely allergic to types. Instead, it's as if each DOM node gets a big-ass dictionary of properties and they can be combined in arbitrary ways, some of which will just not make sense.
posted by a snickering nuthatch at 10:46 AM on July 10, 2018 [4 favorites]


Opera and Chrome (for Mac) display the same.
posted by hal9k at 11:06 AM on July 10, 2018


Same mess different year. At least it's mostly getting better?
posted by BrotherCaine at 11:08 AM on July 10, 2018 [1 favorite]


Instead, it's as if each DOM node gets a big-ass dictionary of properties and they can be combined in arbitrary ways, some of which will just not make sense.

Hey, what's to stop me from making a cake with motor oil instead of eggs?

Nothing? Great!

[LATER]

ugh, why does this cake taste so awful
posted by GuyZero at 11:16 AM on July 10, 2018 [13 favorites]


Opera and Chrome (for Mac) display the same.

Opera adopted Chrome's Blink engine a few years ago. Different UI, but the rendering is the same
posted by ddbeck at 11:29 AM on July 10, 2018


It's lunch trays all the way down, brother.
posted by lumpenprole at 11:30 AM on July 10, 2018


And the whole earth was of one language, and of one speech.
And it came to pass, as they journeyed from the east, that they found a plain in the land of Shinar; and they dwelt there.
And they said one to another, Go to, let us make brick, and burn them throughly. And they had brick for stone, and slime had they for morter.
And they said, Go to, let us build us a city and a tower, whose top may reach unto heaven...
I'm pretty sure "Shinar" was the word for CSS in proto-Hurro-Urartian.
posted by XMLicious at 11:30 AM on July 10, 2018 [2 favorites]


The only big fail I see here is that I should get a error logged in my console for the negative outline-offset. This should definitely be considered an invalid value; I get that HTML/CSS does not make the perfect the enemy of the good (or else we wouldn't see most web pages). I see no problem with the fact that the browsers are inconsistent, because they shouldn't have to handle invalid CSS parameters in the first place. I mean, they have to show something, but there should be an error message in the console for web developers to know they done fucked up.
posted by Edgewise at 11:31 AM on July 10, 2018 [1 favorite]


Setting aside (and it's an elephant in a very small room to set aside) how browsers go about implementing the spec, what I imagine causes a lot of issues is the order they're implemented...right?

I mean, I do this for a living and there are days I throw up my hands.
posted by maxwelton at 11:31 AM on July 10, 2018 [1 favorite]


It's stuff like this that makes me glad I'm not even an amateur web developer any more.
posted by Mr.Encyclopedia at 11:33 AM on July 10, 2018 [3 favorites]


I'm kinda eyerolling at all the pearl-clutching here. How often is outline: inset used? I've seen it maybe once or twice when someone wants to do an ironic Win95 throwback, and pretty much never outside of that. Is it a bug? Sure. Should it be fixed? Probably. Does it actually matter to 99.9% of web developers/designers, especially in comparison to a lot of other bugs/features we're waiting on? Prove me wrong, but I'm pretty sure the answer is "No."
posted by Aleyn at 11:36 AM on July 10, 2018 [9 favorites]


I unironically love this as a piece of visual exploration (and am here for the A E S T H E T I C to boot), even as much as it's leveraged off the messy stupid guts of CSS implementation and all the real-world headaches that come with it.

There's just something sort of...explicitly rather than figuratively occult about it, I guess, is part of the thing? It's one thing to curse and fuss and wrestle with pixels on a box or border and say CSS is a mess; it's another thing entirely to light a candle and utter some short phrase in a gutteral, multi-tonal chant that summons all the faces of the six-sided God at once. That's a deep and precise binding of dark secrets, right there. That's the shit your parents were worried happened at your D&D games.
posted by cortex at 11:37 AM on July 10, 2018 [21 favorites]


Oh, and to the whole "browsers should render my site exactly as I designed it" crowd should *never* enable high-contrast mode on their operating system, lest they weep forever.
posted by Aleyn at 11:44 AM on July 10, 2018 [3 favorites]


I love this. It's great art.

Frankly, the sooner we accept that trying to make machines precise and perfect is bad for us and that understanding them as growing, sprawling systems, as like a philodendron as a clock, the happier we will be.
posted by dame at 11:46 AM on July 10, 2018 [2 favorites]


This is why I don't program web browsers any more.
posted by w0mbat at 11:49 AM on July 10, 2018


I totally expected a rickroll somewhere in this.
posted by theora55 at 11:50 AM on July 10, 2018


Speaking as an HTML Email person... how does this render in Outlook for Windows?

Why am I asking? Nothing renders properly in Outlook for Windows.

NOTHING.
posted by SansPoint at 11:52 AM on July 10, 2018 [5 favorites]


If you find this upsetting, never look up undefined behavior in C or C++.
posted by skymt at 11:52 AM on July 10, 2018 [6 favorites]


brutalist-web.design
posted by gwint at 11:52 AM on July 10, 2018 [12 favorites]


Oh, and to the whole "browsers should render my site exactly as I designed it" crowd should *never* enable high-contrast mode on their operating system, lest they weep forever.

There's a mile of water between an OS re-rendering your site differently than intended to improve accessibility versus different browsers deciding to render the exact same site in a bunch of different ways because nobody can agree on how to interpret an alleged standard.
posted by tobascodagama at 12:02 PM on July 10, 2018 [1 favorite]


(Not to mention that I've seen some not-immediately-dismissable claims that Google in particular is pulling the late-90s Internet Explorer trick of intentionally misapplying the standard so that designers will have to decide whether to put in the extra work of making their design compatible with all browsers or just make settle for compatibility with the browser that has the largest market share, i.e. Chrome.)
posted by tobascodagama at 12:05 PM on July 10, 2018 [4 favorites]


I've been finding myself baffled by the handful of people who respond to this with "this is proof that front-end development is bad" instead of, like, "this is proof that front-end development is hard and front-end developers do not get the institutional respect they deserve". All computer systems are flawed, and part of subject matter expertise is knowing how to adapt to those flaws. The fact that front-end systems are fractured enough that dealing with them is a pain in the ass should not be a knock against the people who know how to navigate them.
posted by Phire at 12:35 PM on July 10, 2018 [17 favorites]


I love this.
posted by jessamyn at 12:39 PM on July 10, 2018 [3 favorites]


 brutalist-web.design

needs more "flat roof leaking like a sieve, water running down inside of algae-stained concrete slab walls" to be truly brutalist.

also, try getting an old-school layout artist to cut and paste a margin as wide as the box you've asked them to lay up on a real drawing board. The results will be as varied and stupid as the results here.
posted by scruss at 1:01 PM on July 10, 2018 [2 favorites]


> I've been finding myself baffled by the handful of people who respond to this with "this is proof that front-end development is bad" instead of, like, "this is proof that front-end development is hard and front-end developers do not get the institutional respect they deserve".

This is in large measure because Javascript has become an application language of choice, so front-end development has been taken over by people trying to make it as Java-ish or Ruby-ish as possible, deprecating the actual and very complex problems of semantic markup and efficient styling because it's just not as interesting to them as writing yet another damned MVC work.
posted by ardgedee at 1:11 PM on July 10, 2018 [5 favorites]


Or, probably more to the point, they're trying to make front-end design as framework-bound as possible, so skill in page construction is deemed irrelevant since if you glue Bootstrap, Material and Vue together in some magic combination you can write unit tests to prove your own correctness, never mind the users confronted with pages that are continually shifting as Javascript continually shims elements into position, and the markup is nothing but DIVs and SPANs.
posted by ardgedee at 1:14 PM on July 10, 2018 [3 favorites]


This is in large measure because Javascript has become an application language of choice, so front-end development has been taken over by people trying to make it as Java-ish or Ruby-ish as possible, deprecating the actual and very complex problems of semantic markup and efficient styling because it's just not as interesting to them as writing yet another damned MVC work.

I had to do a Come to Jesus with my tech lead earlier who was very proud of himself for adding IDs to Everything in our single-page app and how that was going to make our Geb and Jest tests so much easier. A lot of this involves tabular data. The tables were suddenly full of stuff that was basically "#rowIdcolumnName", etc, added by the JS framework. It turned out that after writing like 10k lines of a massive JavaScript application, it did not actually occur to him that "#rowId .columnName" was a thing and that this would theoretically let us actually use those things as CSS is intended to be used instead of just as weird ID clutter.

Even with the frameworks and stuff, everything is so much easier to read and work with if you just use actual semantic elements and sensible CSS, but a lot of the people working in those frameworks never learned how to do that in the first place and don't really feel that they need to invest much time in learning.
posted by Sequence at 1:25 PM on July 10, 2018 [6 favorites]


writing yet another damned MVC work

While we're griping about standardization, I have not detected much actual agreement about how responsibility should be distributed among those three layers (especially controller vs. view and controller vs. model).
posted by thelonius at 1:36 PM on July 10, 2018


It’s a real monkey’s paw moment that getting the web development community to stop reflexively shitting on Javascript means suddenly forgetting that CSS takes skill, and putting CSS in JS won’t do nothing if you don’t know how selectors work.
posted by Phire at 1:56 PM on July 10, 2018 [2 favorites]


Bring back the days when you could learn how to make a web site just by using "View Source" in the browser.
posted by SansPoint at 1:59 PM on July 10, 2018 [5 favorites]


hmmm... I see three top panels with snippets of web related code (one of which appears to be entirely comments), and a bottom panel with two square green boxes. And when I type into the top panels, or click on anything, anywhere. . . nothing at all happens.

I'm no web developer, and I'm an embarrassing hack of a programmer. . . but what on earth is this? Is there something I have to click on to make it do something?
posted by eotvos at 2:06 PM on July 10, 2018


> Bring back the days when you could learn how to make a web site just by using "View Source" in the browser.

"View Source" will only show you the precompiled version of the HTML page. You have to instead invoke the developer view of the page (how to do this differs by browser, of course), which provides (ideally) the real-time state of the HTML document, plus all the means necessary to see how it got that way.

In some ways this is better because Javascript and CSS aren't going to be uninvented, so we may as well have efficient means to deal with them. The debugging tools get incredibly elaborate but you don't really have to use them.
posted by ardgedee at 2:09 PM on July 10, 2018


CSS reeks havoc on Cello.
posted by PHINC at 2:09 PM on July 10, 2018 [1 favorite]


> what on earth is this? Is there something I have to click on to make it do something?

The real payoff is in the Twitter link that illustrates how the same snippet of code (the HTML plus the CSS) appear differently on each of the major browsers. The codepen.io link provides interactive access to the code, making it easier to view or play with -- but you're only going to be able to get it to render in whatever browser you're using at the moment.
posted by ardgedee at 2:11 PM on July 10, 2018 [2 favorites]


You have to instead invoke the developer view of the page (how to do this differs by browser, of course), which provides (ideally) the real-time state of the HTML document, plus all the means necessary to see how it got that way.

From a "learning how to make websites" perspective, though, DevTools has a lot of huge advantages over viewing source, among which that you can not only see how it got that way, you can change it live right there, which is pretty neat.
posted by Sequence at 2:27 PM on July 10, 2018


I'm a design student who is learning how to code and I enjoy CSS. I think mostly because it wreaks havoc and I like seeing people who shit on front end start crying and ask me questions. Oh, the power. I think I'm definitely chaotic neutral when it comes to my skills.
posted by yueliang at 2:52 PM on July 10, 2018 [2 favorites]


The scorn for this (imo hilarious) quirk is akin to pointing to undefined behavior in C/C++ and screaming "this is why computers don't even EXIST" and then throwing your Tandy into a trash compactor. It's undefined behavior caused by some nonsensical values from an old and effectively-never-used CSS property that is supported purely out of backward compatibility. It's in facte awesome that this is making the rounds because nobody discovered it until now, and it demonstrates precisely zero about the state of building websites in the present day.
posted by potch at 3:12 PM on July 10, 2018 [10 favorites]


Old and busted: "Oh no, a PDF! This will take forever to load!"
New hotness: "Hey, a PDF! I might be able to actually read this!"
posted by RobotVoodooPower at 3:26 PM on July 10, 2018 [6 favorites]


ardgedee: I'm increasingly of the mindset that JavaScript was a mistake and that web browsers should do nothing more complicated than render static pages, and anything more complicated than that should be done on the server side. (Yes, yes, I know how PHP works. I've developed in it. Thank you.)

There is no good reason why any site that delivers a largely static experience, be it a blog post, or a photograph, needs to have a shitton of JavaScript frameworks. I was paid to learn AngularJS 2. It took installing multiple helper tools before I could write a simple goddamned "Hello World," and even that had to be transpiled into JavaScript before I could view it in a fucking browser.

HTML Email, which I do for a living, has its problems, but at least table-based layouts and inline CSS fucking work.

Except in Outlook, but nothing works in Outlook.
posted by SansPoint at 4:21 PM on July 10, 2018 [6 favorites]


putting CSS in JS

I have never figured out why the fuck anyone would want to do that. Years were spent getting font tags and javascript out of HTML and now we have fucking React. Facebook has ruined the web in more ways than one.

Because I survived being on one terrible React project without going completely mad I've been put on another- this time my only task is to explain to the client how the code works but the dev who built the React app and basically wrote no docs and used no comments and didn't really even organize his componenets has left the company so I spend my days asking questions I hate myself for asking like "where the fuck is this component's reducer" and seriously the tech debt is insane.
posted by eustacescrubb at 5:46 PM on July 10, 2018 [8 favorites]


Goedel sez an unambiguous spec can't happen.
posted by jenkinsEar at 7:07 PM on July 10, 2018 [2 favorites]


A few years ago I had a decent grasp of CSS, i.e., not a pro, but I set up my own genealogy-related website and helped others with theirs. I had been planning to get back into the subject this fall, expecting that a lot has changed/improved since my last experience.

Thanks to this post—and to the above comments—I am reconsidering that plan. The older I get, the more I value my relative sanity.
posted by she's not there at 8:04 PM on July 10, 2018


isn't this defining an invalid structure? so there's no correct rendering, and the browsers are free to display it however they like. ("html" is table display, and "body" is table-cell display, but there's no table-row containing the table-cell)
posted by russm at 8:34 PM on July 10, 2018 [2 favorites]


Goedel sez an unambiguous spec can't happen.

Sure it can. Look at the spec for TeX.

I mean the code. Which is, coincidentally, the spec.

I guarantee the code implements the spec perfectly.
posted by GuyZero at 11:18 PM on July 10, 2018 [5 favorites]


As Goedel well knew, there exist formal axiomatic systems, such as propositional logic, that are both complete and consistent. But, iirc, only ones too weak to axiomatize arithmetic. I do not know if you can derive arithmetic from the CSS spec.
posted by thelonius at 11:45 PM on July 10, 2018 [1 favorite]


calc()
posted by jenkinsEar at 3:30 AM on July 11, 2018 [4 favorites]


A spec is not a proof. And it is trivial to describe and define HTML without using HTML. So I'm not sure Goedel's Incompleteness Theorem applies here.
posted by ardgedee at 8:06 AM on July 11, 2018 [1 favorite]


I've been finding myself baffled by the handful of people who respond to this with "this is proof that front-end development is bad" instead of, like, "this is proof that front-end development is hard and front-end developers do not get the institutional respect they deserve". All computer systems are flawed, and part of subject matter expertise is knowing how to adapt to those flaws. The fact that front-end systems are fractured enough that dealing with them is a pain in the ass should not be a knock against the people who know how to navigate them.

It's mostly just sad and a waste of countless brain-hours. Front-end development in a theoretically-perfect world would have some essential complexity, but there's also a lot of needless complexity heaped on top of that. I don't lay that at the feet of framework developers (I think React in particular is a good step forward, and of course things like Elm etc.) but rather with the standards bodies and the original developers of the underlying languages.

I stay away from front-end not because of any contempt towards front-end developers (which is unfortunately totally A Thing) but because it's hard to stomach dealing with those flaws. I'm glad that there are people that do have the stomach for it. (Also I have an emotional need for types and don't know how people cope without them)
posted by a snickering nuthatch at 9:42 AM on July 11, 2018 [3 favorites]


I was there when Tantek invented the Tan Hack.

Can I get that on a t-shirt?
posted by Dr. Curare at 9:46 AM on July 11, 2018 [1 favorite]


(Also I have an emotional need for types and don't know how people cope without them)

I knew this part was coming from "hard to stomach dealing with flaws" and I see it everywhere but find it totally foreign. Front-end is fun because it is a complex system that tries to let people do complex things they want instead of limiting them to unambiguous things a Computer Can Understand.

Making interactive pictures is fun and hard and way more rewarding that making an airtight proof. It's all the good parts of humans!
posted by dame at 2:19 PM on July 11, 2018 [4 favorites]


One of the ways front end is awful is the discoveries you make along the way.

So I do have a Mac, which sits on my desk running whatever version of the Apple OS it's allowed to (I think it's a 2015 or 2016 iMac and therefore won't be dumpster-fodder until a few months from now). It gets fired up occasionally when I want to see just how bad Safari is (mostly it's mediocre, a year behind adopted standards by my guesstimate).

So I thought I had a fairly OK grasp on what mangling Safari was doing to various pages. I do not, of course, only discovered because the design I was paid to implement had a pretty prominent bottom tool bar. Apparently iOS Safari has a special 55-pixel magical "it just works" toolbar, anchored to the bottom of that execrable browser, which makes that same bottom distance of any web page mostly un-clickable as touching Safari in that special place brings up whatever that bar is. Jobs forbid you have something like a footer, with a privacy policy or whatever, I guess.

I mean, WTF.

It's one thing to add your browser bar "outside" of the page content (like the annoying Firefox bar which appears if you even let your eyes move up the page), but to essentially make your gimmick supersede the page your user is viewing is BS.

And now I am an old.
posted by maxwelton at 3:32 AM on July 12, 2018 [2 favorites]


Your designer designed what's known as a dickbar - the nice thing about Safari having those buttons there is it means fewer websites will have dickbars, which makes the web a nicer place for everyone.
posted by eustacescrubb at 3:22 PM on July 12, 2018 [2 favorites]


I'm with eustacescrubb. Keep your lousy goddamn toolbars out of my content area. I'm okay with a navigation hamburger menu in the top corner somewhere, as long as it's unobtrusive, but if I'm reading content, don't stick your stupid sharing toolbar in my face while I'm reading. I'll share if I want to when I'm done.
posted by SansPoint at 3:42 PM on July 12, 2018


Hm. It's actually more akin to a footer, bottom of every page, with some useful links in it. But got it, Apple users don't use footers.
posted by maxwelton at 12:21 AM on July 13, 2018


maxwelton: Funny, I’ve never had a problem with a footer area in Safari on my phone, as long as it’s not stuck to the bottom of the viewport. If it’s a footer, have it at the bottom of the page. If you have “infinite scrolling” on your page, disable it. And don’t stick things to the bottom of the viewport.
posted by SansPoint at 4:46 AM on July 13, 2018 [1 favorite]


« Older The Debt Crisis   |   Hey, hold my beer Newer »


This thread has been archived and is closed to new comments