1. 36
  1.  

  2. 26

    I have a suggestion to the author: Stop Displaying a Blank Page With JavaScript Disabled.

    1. 28

      What’s up with these web pages that don’t actually contain their content? Why should I run some javascript in order to read some text?

      1. 31

        An article that complains about the size of icon fonts and “flash of unstyled text” yet loads 604k and has a “one moment please” progress spinner to display some basic text is somewhat hilarious. 2021 frontend in a nutshell.

      2. 11

        Unicode provides many useful icon-like characters, you know the arrows, music notes, squares and triangles … no social media icons of course.

        Good thing is, if you have the correct compose sequence for it, you can see the character in the code.

        1. 10

          svg is the most underrated web technology

          1. 2

            If your site relies on icons in a non-contextual way, someone using an assistive font (e.g. OpenDyslexic) will cause your icons to be replaced and disappear completely, potentially leaving your web site unusable.

            This. I switched to Atkinson Hyperlegible recently because it was so much easier to read for me that it made a tangible difference in my experience of using the internet.

            However, it has in the process catastrophically broken almost all the sites I use daily. A cytube instance I admin does not show any icons on the buttons, my email client no longer shows buttons.

            It’s extremely frustrating to have this problem, and now even after switching back out of desperation, these icons no longer show.

            1. 2

              If we keep using these argument then we should all all code in Rust/C++. But we got JavaScript/Ruby/Python/PHP?

              to me, I found that icon fonts are better. simply because It fit my needs where I don’t need advanced features that SVG offers. All I need is display an icon, change its color with CSS. font awesome icon font works great for me.

              1. 25

                The important part of the argument was not that SVG icons are more flexible, but that icon fonts can interfere with a bunch of features, break down in a bunch of scenarios, and create additional complexity for a bunch of other software that has to deal with them.

                1. 4

                  In-fact, to this day icon fonts remain the only way to add scalable icons purely from CSS without altering the page markup (and going back to mixing presentation and content).

                  All pure SVG solutions either require changes to the markup or don’t allow CSS to alter the images colors.

                  1. 4

                    You can render an svg from css by setting background-image?

                    1. 1

                      Yes, but then you can’t change the color with CSS

                      1. 5

                        Actually you can change SVG colors with CSS (including background images), if you are willing to use some black-magic color transformation tricks : https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/ (thar’ be dragons!)

                    2. 2

                      That’s true, and a very strange limitation to still be stuck with.

                      Howver, most icon font use is not doing that. Usually the page is littered with empty i tags or similar, and often the icon isn’t even recoloured!

                      1. 2

                        You can change the color of an SVG using filter:

                        .iconinverted {
                        filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
                        }
                        

                        I use that on my contact page

                        1. 1

                          I think this is the main argument for icon fonts – most of the time the use is just to improve the design, not the content.

                        2. 0

                          I totally see what you are saying. Very clear.

                        3. 1

                          Anyone have any numbers for the size of 100 SVG files vs. an icon font with the same glyphs? I imagine it’s a pretty big difference. SVG is XML, which is the least efficient way to encode a Bézier path I can think of. Whereas web fonts are TrueType, which having been designed circa 1989, goes to great pains to keep path data compact.

                          Plus, isn’t the browser making 100 HTTP requests to fetch those 100 SVGs?

                          I do understand the accessibility reasons against web fonts. I just don’t think this article took into account their size benefits.

                          1. 6

                            You can put multiple icons in the same SVG file, define a viewbox with a different id for each of them, and address that ID with a fragment on the SVG URL to limit the view to just that icon. You can use such URLs in background-image and then use background-size to scale the icon as needed.

                            Works in all browsers, all the way back to IE 9 (!) if you want to.

                            And unlike with icon fonts (where you have to juggle meaningless codepoint numbers or cryptic Unicode characters in the CSS or markup) and PNG sprites (where you have to juggle meaningless pixel coordinates in the CSS), these SVG sprites also lead to completely readable and maintainable CSS, assuming you assign meaningful names to the IDs (e.g. “background-image: url(toggle.svg#enabled);” or such).

                            1. 3

                              You can put multiple icons in the same SVG file,

                              And then you gzip it and compress away most the redundancy.

                              1. 1

                                This is pretty close how the sprite in Feather works. Google Material Icons also used to have a sprite sheet, but the set got bloated and they did a structural overhaul in 4.0 that left it out.