{"id":365173,"date":"2022-03-29T13:01:58","date_gmt":"2022-03-29T20:01:58","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=365173"},"modified":"2022-03-29T13:01:59","modified_gmt":"2022-03-29T20:01:59","slug":"296-valuing-sites-color-fonts-css-logic","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/296-valuing-sites-color-fonts-css-logic\/","title":{"rendered":"296: Valuing Sites, Color Fonts, CSS Logic"},"content":{"rendered":"\n

[Chris]:<\/strong> Hey! Thanks for tuning in for another week of CSS-Tricks news! Future issues of this newsletter will be coming from the gang at DigitalOcean so if they look a smidge different, that’s why! Reminder!<\/em>\u00a0If you\u2019d like to keep getting this newsletter going forward,\u00a0you have to opt-in<\/a>\u00a0to that. 🙏<\/strong><\/p>\n\n\n\n

\n\n\n

? ? ????<\/h3>\n\n\n
\"\"<\/figure>\n\n\n\n

COLRv1 Color Gradient Vector Fonts in Chrome 98<\/a>:<\/p>\n\n\n\n

Today, for most users, emojis are the only color fonts they see. Emojis typically appear on the web via the system emoji font, or by inserting images (which has its own complications, (editor’s note: lol, image of a “sad panda” here but I’d rather not deal with embedding it inline in a blockquote in an HTML email). Large file sizes especially for bitmap-based color fonts have made it difficult to use web fonts for emoji. By supporting COLRv1, we hope to see a proliferation of creative color font use on the web and beyond.<\/p><\/blockquote>\n\n\n\n

I’ve been pretty skeptical of color fonts. Seems weird to force specific colors of a font? And if the main point is single-glyph usage like emoji<\/em>, why not just use a very simple just-put-<svg><\/code>-in-place method<\/a>? I don’t love that this might encourage a new era of typically-problematic icon font usage. Still\u2014It’s cool that any given glyph can use a whole bunch of colors, that’s new territory for fonts, and the idea that it enables alternate emoji systems is interesting. Here’s hoping people do it with performance, accessibility, and fallbacks in mind.<\/p>\n\n\n\n

\n\n\n

Low hanging fruit is low<\/h3>\n\n\n

Top Ten Most Common Web Accessibility Issues<\/a>:<\/p>\n\n\n\n

  1. Image alt text errors<\/li>
  2. Not providing a visual indication of the current focus<\/li>
  3. Failure to use proper labels<\/li>
  4. Non-descriptive text for hyperlinks<\/li>
  5. Link areas are too small<\/li>
  6. Tables markup<\/li>
  7. Improper use of heading elements<\/li>
  8. Color contrast<\/li>
  9. Embedding non-accessible documents<\/li>
  10. Same descriptive text for different resources<\/li><\/ol>\n\n\n\n
    \n\n\n

    Like Sudoku only you get paid for it<\/h3>\n\n\n

    Writing Logic in CSS<\/a>:<\/p>\n\n\n\n

    More traditional, general-purpose languages (like JavaScript) give us tools like Conditions (if\/then<\/code>), Loops (for<\/code>, while<\/code>), Logical Gates (===<\/code>, &&<\/code>, etc.) and Variables. Those structures are named differently in CSS, their syntax is wildly different to better accommodate the specific use case of styling a document, and some of those simply weren\u2019t available in CSS up until a few years ago.<\/p><\/blockquote>\n\n\n\n

    CSS is all logic. Every single selector. It applies if it matches (or :not()<\/code>) But the logic just keeps going from there. Even if it matches, does it win? If it wins, do all the declarations take effect or are there other things at play, like !important<\/code>?<\/p>\n\n\n\n

    Maybe that’s why I love CSS so much, all the logic!<\/em> I love logic puzzles! <\/p>\n\n\n\n

    Oh hey, there are even more obviously logical structures coming to CSS, if we can get them named right<\/a>. <\/p>\n\n\n\n

    \n\n\n

    An excellent way to explain to some unfamiliar with the business of creating websites…<\/h3>\n\n\n

    How much does a website cost?<\/a><\/p>\n\n\n\n

    1. $50 Websites – \u201cDIY\u201d<\/li>
    2. $5,000 Websites – \u201cMom & Pop\u201d<\/li>
    3. $50,000 Websites – \u201cBrochureware\u201d<\/li>
    4. $500,000 Websites – \u201cRevenue Generator\u201d<\/li>
    5. $5,000,000 Websites – \u201cMission Critical\u201d<\/li><\/ol>\n\n\n\n
      \n\n\n

      Not exactly losing marketshare<\/h3>\n\n\n

      WordPress: Where It\u2019s Headed in 2022<\/a>:<\/p>\n\n\n\n

      Here are three major areas the WordPress Performance Team is focused on:<\/p>

      \u2022 Performance (there is a team in place<\/a>)
      \u2022 Creation of a Theme to End All Themes (e.g.       Full Site Editing<\/a>)
      \u2022 Headless WordPress (it\u2019s already a thing)<\/p><\/blockquote>\n\n\n\n

      I feel like WordPress really has a knack for seeing things that might cause them future grief and tackling them head on early enough that the grief never materializes. <\/p>\n\n\n\n

      \n\n\n

      CSS-Tricks<\/h2>\n\n\n
      \"\"<\/figure>\n\n\n\n

      That’s right, there is new content starting to roll right on CSS-Tricks. Didn’t take the new editorial team long to get situated and pushing out great new stuff!<\/p>\n\n\n\n