12 ms·
Flow Charts with CSS Anchor Positioning
- xnx 2y agoWe might have pushed CSS further than it should go, but using gradient for the connector lines is pretty clever.
- lukan 2y agoIt is pretty nice, but my thirst thoughts were also, how this will make new browser engines more hard to make.
- zarzavat 2y agoWe passed that threshold in 2019 when Microsoft gave up trying to make a browser engine because it was too difficult.
- clan 2y agoYet, Ladybird.dev is happening.
- worldsayshi 2y agoOr they don't know what they gain from maintaining their own.
- lukan 2y agoWell, they had a dominating browser for many years, so they know the benefit. Apparently they decided it is cheaper to just focus on the "user experience". Now they can still control what buttons there are and whatbis shown on the home screen by default, but do not have to bother so much with all the expensive technical details.
- robertlagrant 2y agoYeah - very smart. I suppose the lines won't be interactive (e.g. "double click on this line to add a text label") because the line isn't there in any sense Javascript would be aware of. Unless Javascript computes the same gradient, which is then a pointless duplication. But it's very clever. Makes me wonder if there's a missing format out there that should be built into browsers that describes shapes and connections.
- allendoerfer 2y ago> Makes me wonder if there's a missing format out there that should be built into browsers that describes shapes and connections. https://developer.mozilla.org/en-US/docs/Web/SVG https://developer.mozilla.org/en-US/docs/Web/SVG
- robertlagrant 2y agoWhere's the bit with connectors, though?
- the_other 2y agoI think it's "cute" but a hack that abuses the spirit of what HTML and CSS are for, and what they do well. It's inaccessible and lossy.
- llama_drama 2y agoI don't think we pushed CSS too far; the complexity of CSS is inherently tied to the complexity of the UI requirements. Even now CSS can't handle everything.
- Izkata 2y ago"The Shapes of CSS" was 6 years ago: https://css-tricks.com/the-shapes-of-css/ https://css-tricks.com/the-shapes-of-css/ I remember various triangles using "border" and 0 width/height being pretty common even in the decade before that.
- bugfactory 2y agoI'm constantly amazed by how much can be achieved with only CSS nowadays. It seems like it's getting more powerful by the month as developers find new and tricky ways to push the boundary ;)
- autoexec 2y ago> I'm constantly amazed by how much can be achieved with only CSS nowadays. Honestly it's a bit too much. CSS is used for fingerprinting and exploits. It's become a security risk to have it enabled and I think before long we'll want CSS blockers the same way we have blockers for JS. The ability to allow only sane subset of CSS would be really useful!
- persnickety 2y agoI've been longing for the ability to disable media queries. Just serve me the default. It's not only useful against fingerprinting, but also when the creator's idea of what layout is appropriate on my setup differs from mine.
- _nalply 2y agoDid not try it out, but an idea: write a user script that changes the <meta viewport>. See https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... what this meta tag does.
- eyelidlessness 2y agoYou might be pretty disappointed by the defaults in many cases: it’s extremely common to start with styles for the smallest viewports (“mobile”) and use media queries to add larger viewport variants. I don’t know if you’re among the same people who complain about the overuse of mobile UI techniques on larger screens/devices, but that’s almost certainly what you’d get more of in general.
- persnickety 2y ago
- sollniss 2y agoConnector lines not showing in Firefox.
- wellyeahkinda 2y agoI mean, the article starts by explaining the fact CSS anchors was pushed as a chrome feature. Only browsers that inherit from it by default will have this. https://developer.mozilla.org/en-US/docs/Web/CSS/anchor https://developer.mozilla.org/en-US/docs/Web/CSS/anchor
- azangru 2y ago> was pushed as a chrome feature Or has it perhaps been accepted as a specification, but Blink-based browsers implemented it first? https://www.w3.org/TR/css-anchor-position-1 https://www.w3.org/TR/css-anchor-position-1
- panzerboiler 2y ago> This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
- azangru 2y agoEven as a suggestion that this is hardly pushed as a Chrome feature?
- riquito 2y agoThe article doesn't mention that it's not supported by other browsers. The two things (pushed by chrome / unsupported by others) are not consequential. If you don't clearly state it and people start using the shiny new thing you're hindering the few alternative browsers out there.
- robin_reala 2y agoNothing but Chromiums support this, but it should be happening in the not too distant future: https://caniuse.com/css-anchor-positioning https://caniuse.com/css-anchor-positioning
- autoexec 2y agoConsidering this is a CSS trick, it'd be nice if all the demos didn't require/load a ton of JS. Viewing source on the demos shows them to be like 90% javascript, several tens of thousands of characters, and that doesn't even include the five external JS files it also loads.
- lenkite 2y agoIdeally, browsers should offer an API where a certain rect on screen can be rendered as SVG or PNG. Then such CSS flowcharts can be distributed as independent images instead of being a web-page.
- iddan 2y agoSee: https://web.archive.org/web/20140901100550/https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas https://web.archive.org/web/20140901100550/https://developer...
- 6510 2y agoJust have a flow chart html element?
- dgb23 2y agoI don't quite understand your comment. You can embed SVG in HTML and vice versa and you can use CSS on it.
- the_other 2y agoFlow charts are a terrible use case for CSS (and HTML). The nodes and edges of a flow chart are all meaningful data. When you render the connectors using a mixture of empty divs, pseudo-content and largely arbitrary hacks, all that meaning gets lost from the _content_ (the HTML). Access tooling will largely fail to communicate your intent. Flow charts are much better represented by something like PlantUML or Mermaid, and then rendered direct to SVG or a canvas. The mark-up is much more human-readable and could be used as source to drive an even-more accessible alternative.
- lukan 2y agoI think it is possible to use this as just the renderer and have your actual data of the nodes in a clean state elsewhere (as JSON for example).
- livrem 2y agoCould have it as an output format for something like Pikchr, but not sure what the advantage would be over just generating a SVG? https://pikchr.org/ https://pikchr.org/
- mock-possum 2y agoThat’s an interesting point - how accessible is JSON to differently abled users?
- lukan 2y agoWas that a serious question? If so, JSON is just a raw data object. I suppose one could read it with a screen reader, but whether that makes sense depends how the data is structured. But it would not be a great experience.
- staminade 2y agoWhy not represent them as PlantUML or Mermaid and render to HTML/CSS? That way you get far superior layout capabilities, particularly for text, than SVG or canvas provide you.
- ericyd 2y agoFriendly warning that anchor positioning is not yet available in any non-Chromium-derived browser.
- meindnoch 2y agoGreat. Yet another special case added to CSS.
- gavinbao 2y agoIs it possible that it can create a flow chart library with pure css? maybe like we make the className like tailwind to let others use to easily ship flow chat with pure css?
- simple10 2y agoThanks for sharing. This has a lot of promise once browsers fully support anchor positioning. With the current rate of CSS standards adoption, my guess is Firefox and Safari will add support by end of this year. Pure speculation as they haven't announce support plans yet AFAIK. Chrome and Edge currently support anchor positioning: https://caniuse.com/?search=css-anchor-positioning https://caniuse.com/?search=css-anchor-positioning
- dgb23 2y agoNeat examples! However I think I would still use SVG for these sorts of things, especially since they can easily be manipulated, animated and are more mathematically declarative than CSS anchor positioning. I think the sweet spot for this CSS feature is not having to do complex workarounds with calc, positioning, transforms or JS in order to have more control over positioning elements relative to others. Container queries have a similar use case. Both of these features (as well as CSS grid) are born out of the same underlying issues: - HTML and CSS are not orthogonal in terms of layout, but very tightly coupled - Trees are a fundamentally crippled data structure to express layouts. Almost every sufficiently complex layout wants to be represented as a graph or a matrix. Trees are fine until they aren't.
- thegiogi 2y agoYour last sentence is very interesting to me. Can you explain what you mean? Or suggest something to read?
- AstroJetson 2y agoI just use Markdeep and create the block diagrams that way https://casual-effects.com/markdeep/features.md.html#diagramexamples/flowchart https://casual-effects.com/markdeep/features.md.html#diagram...
- mediumsmart 2y agodiv popover in css … yay