You know, this is the time of year where Chris normally publishes a big ol’ reflection of the past year. The first one was published in 2007, the same year CSS-Tricks began, and it continued all the way through 2021 without missing a beat. Having been a CSS-Tricks reader myself all those years, I’d hate to see that change.
So, here we are! 2022 was sure a heckuva year as far as transition goes. At this time last year, we were looking ahead at some goals for the upcoming year (which we’ll get to) but wound up joining DigitalOcean. That was a massive sea change (pun intended) and yet you stuck with us the whole way. It really means a lot to me that so many of you come here to read the things that I and a slew of other guest writers publish here. It just ain’t a community (or any fun) without y’all.
Thank you!
This is the last post we’re publishing this year as we hang up our Gone Fishin’ sign for the holidays. We’ll be back January 9 with a spate of content that’s fresh from the oven.
OK, this is where we start digging into the site’s analytics. That’s something we’ve always been transparent about and will continue to do. It’s not like our numbers are in some off-limits black box, and the hope is that sharing them somehow helps you and your business.
Overall traffic
Overall, Google Analytics is showing a total of 64m pageviews for the entire year. That’s wayyyyy down from last year’s 88m, which is alarming at first glance. I mean, who wants to see a 27% drop in year-over-year traffic?
But there’s good reason for that because we published a wayyyy less content this year. We all know Chris was a prolific writer (and still is, of course), often spitting out multiple posts a day. It’s sorta like we lost our most productive contributor for the bulk of the year. Let’s compare the publishing activity for the last few years:
2020: 1,183 articles
2021: 890 articles
2022: 390 articles
A 27% drop in pageviews is a lot less concerning considering we published 43% fewer articles than last year, and a whopping 67% fewer than 2020’s overall total.
Hmm, I don’t feel like I’m working 67% less…
And all of this comes with the caveat that this is just what we get from Google Analytics. In past years, Chris has compared those numbers with stats from Cloudflare (the CDN layer that sits on top of the site) and Jetpack (the plugin that connects our self-hosted WordPress site to WordPress.com’s SaaS-y features). The results are always consistently inconsistent to the extent that I’m not even bothering to look this time around. (Alright, alright maybe just Jetpack… which shows 59.9m pageviews — oddly more than 2021’s 55m total.)
Articles, by the numbers
This is what I always look forward to each year! Here are the top ten articles in 2022 that were published in 2022:
I’m actually surprised that last one wasn’t higher on the list. And I’m really stoked to see one from the Alamanac in there, especially because Mojtaba chipped away at all of the CSS Grid properties over the past year and half and he knocked it way out of the ballpark. I thought I had a good handle on grid until I started reading all of the gold nuggets he packed into each property. There’s so much to learn in there and Mojtaba has a knack for clearly explaining complicated things. I’m hoping to update the CSS Grid guide with all that fresh information (but more on that in a bit).
I love seeing the CSS Cascade Layers guide in there, too! I had so much fun working with Miriam on it. If you didn’t know it, she’s an editor for the spec. It’s a treat (and honor, really) to host her work here and make it available for us all to bookmark and reference.
All posts that were published in 2022 make up 4.8m pageviews, or about 7.8% of all pageviews. Our most viewed article is always the ol’ Flexbox guide which garnered 5.8m views this year. I’d love to see our new content outpace that one item, and I believe that would’ve easily happened if we’d kept up the pace of publishing. Back of the napkin math here, but we may have been around 67m pageviews if we had published 540 more articles to match last year’s number of published articles.
If we take a few steps back, then we can see the most-viewed articles from the past year, regardless of when they were published:
Yep, nearly identical to last year. And the year before. And the year before. And… well, almost. “Gradient Borders in CSS” is new, bumping the box-shadow property off the list. Everything else from the four spot on merely swapped places.
Speaking of the properties in the Almanac, I wanna see what y’all referenced most this past year:
One pseudo at the top and nothing but properties after that. Interesting, given that relational pseudo selector functions like :has(), :is(), and :where() are new kids on the block.
Newsletter
The numbers here are way too messy to draw any insightful conclusions. After moving to DigitalOcean, we had to scrub our list of 91K+ subscribers for compliance purposes and the number plummeted as a result. If you were dropped from the list, you can re-subscribe here.
The good news? We’re still doing the newsletter! We actually fired it back up in August after a five-month hiatus. We were on a weekly cadence, but are at once a month now while yours truly is authoring it. I sure hope to bump it back to a weekly publication. (I miss you, Robin!)
Site updates
It’s been mostly about keeping the ship afloat, if I’m being honest. Other than some minor tweaks and maintenance, the site is pretty much where it was at this time last year.
That will change big time in 2023. If you’ve been keeping up with our monthly Behind the CSScenes updates, then you know that we’re planning to migrate CSS-Tricks from WordPress to the same homespun CMS that DigitalOcean uses for all of its (stellar) community content.
That work kicked off a couple months ago and should be done within the first half of the year. You can bet that we’ll keep you updated along the way. Besides a fresh design and a new back-end, it should be business as usual. If you have any questions about that work and what it means for your favorite front-end publication, please do hit me up in the comments or shoot me an email.
If you haven’t seen it yet, here are a few comps that our designer, Logan Liffick, put together:
2021 goal review
Oy, I’m hesitant to even look. All the effort it’s taken to integrate with DigitalOcean and find a new rhythm dominated everybody’s time, leaving precious little to take a crack at Chris’ goals, which were:
✅ More SEO focus. I’ll give us a passing grade here. The truth is that Chris and I were already digging our heels into this prior to the acquisition. We replaced the Yoast SEO plugin with RankMath, taking advantage of its in-editor tools to help us learn how to optimize our posts for search results. And to be clear: it’s less about increasing traffic for more sponsorship revenue than it is recognizing that search is the primary way readers like you find us, and making it easier for you to find what you’re looking for. That’s especially true now that we’re backed by DigitalOcean and rely on sponsorships way less than we used to.
🚫 Another digital book. Swing and a miss! Well, we never actually swung in the first place, or stepped into the batter’s box for that matter. (Is this how sports analogies work?) Chris published a book of The Greatest CSS Tricks in 2020 and made it a perk of being a paid CSS-Tricks subscriber. The idea was to do another one this year, but we got rid of the paid subscriptions and opened The Greatest CSS Tricks up for everyone to enjoy, free of charge.
🚫More social media experimentation. Nope! But that might be for the best, considering where Twitter is at right this second. We might be forced to experiment in this area next year more out of neccessity than interest. Twitter has always been a drip in the proverbial bucket of CSS-Tricks traffic; so much so that investing in it feels like putting our eggs in the wrong basket, er bucket. I dunno. Part of me just wants to sit on my hands and see how things shake out before deciding on anything new or different.
2023 goal-setting
New year, new goals, right? Allow me to put a bunch of words in the team’s mouth and project what I feel are top priorities for us heading into 2023:
A smooth site migration. Nothing would make me happier1 than a hiccup-free move to DigitalOcean’s architecture. But c’mon, we all know something always comes up when it’s go time. This site has 7,000+ articles that have been written over 15 years, and there have been 19 versions of the site in that timespan. There are so many custom post types, custom fields, page templates, functionality plugins, integrations, and a database that’s over 6GB to move over and map to an existing system. Good thing we have a team of top-notch developers here to take it on!
Publish 1-2 new guides. I’d love to aim higher, actually. We went from nine new guides in 2020 to a paltry one new guide in 2021, and another one this past year: Miriam’s Complete Guide to CSS Cascade Layers. I have a list of 10 more that I’d love to write, but think we’ll set the bar super low given our recent track record. I mentioned earlier that I’d love to incorporate Mojtaba’s work in the Almanac into the existing CSS Grid guide. That’s no small amount of work and I’d count it towards the goal if we can pull it off.
Expand the Almanac. This is my moonshot. I’d love to see more types of documentation in there. We have pseudo-selectors and properties, which is great and always has been. But, geez, think of all the other things we could have in there: functions, at-rules, units, selectors, property values, etc. We’re only scratching the surface of what could possibly go in there! If we get even one of those, I’d be in place-self: heaven.
Thank you so, so, so much!
This is my dream job and I wouldn’t have it without readers like you. I can’t believe it’s been eight years since my very first article was published and that I’m still here, working with learning from the brightest minds in our field. I could ramble (more than I already have) on how much the CSS-Tricks community means to me, but what it really comes down to is… thank you, thank you, thank you. From the bottom of my heart, thank you.
And thanks to all the fine folks here at DigitalOcean who have made a great home for CSS-Tricks. Extra special high-fives to Haley Mills, Sydney Rossman Reich, Bradley Kouchi, Karen Digi, David Berg, Matt Crowley, Logan Liffick, and Kirstyn Kellogg for getting me personally up to speed and making me feel so welcome here. It’s a great place to be.
Forward, we go!
Well, as happy as a WordPress fanboy like myself can be. ↩️
We’ve started making a tradition of rounding up the latest front-end research at the end of each year. We did it in 2020 and again in 2021. Reports are released throughout the year by a bunch of different companies and organizations researching everything from web design trends to developer skills to popular coding languages and so many other things.
What it is: A study that looks at 8.3 million websites sourced from the Chrome UX Report that analyzes how the sites were made, breaking things up into sections that include page content, user experience, content publishing, and content distribution. The CSS chapter is written by Rachel Andrew (so you know it’s good) and reviewed by folks that include Chris Lilley and CSS-Tricks contributor Jens Oliver Meiert.
What it found: The last two years has shows that CSS continues to contribute to overall page weight. This year was no exception, with CSS weight increasing 7% at the 90th percentile. That’s on par with past years.
What was the most popular class name in 2022? .active. But you also see a bunch of vendor-specific prefixes in the list, like .fa- for Font Awesome, and many for WordPress, such as .wp-, .has-large-font-size, and .has-pale-cyan-blue-background-color (phew!) which I guess is an indication of what the most popular background color is for WordPress sites.
What it found: Well, hey, look at that! The number of distinct accessibility errors has decreased 1.1% since February 2021. That’s modest improvement, but we’re still looking at a grand total of 50,829,406 errors — or an average of 50.8 errors per site — and those are just the ones that could be detected! I think we’d all do well taking time to read Hidde de Vries’s post on how to fix the common accessibility issues outlined in the report.
What it is: This survey pokes at CSS usage each year, surveying developers on the features they use, as well as their understanding of and satisfaction with them. Co-creator Sacha Greif openly wondered if there is too much CSS in a post he wrote right here on CSS-Tricks and a good part of that was based on the rising number of CSS features in recent years. This year’s survey garnered 8,714 responses from developers around the world.
What it found: Some really neat stuff this year. With all of the new CSS stuff that’s shipped in the past couple of years, there are still plenty of them that have yet to gain traction, whether it’s an awareness thing or the lack of browser support. For example, a whopping 46.7% of folks are only aware of 40% or less of the features covered in the survey. Container queries are a good example of a feature with awareness (58% have heard of it) but little use (12.6% have used it). The :has() selector is a glaring success with 54% knowing about it and 34.8% already using it.
Oh, and don’t miss Lea Verou’s conclusion, which predicts that CSS nesting and color manipulation will rule in 2023. I agree. Nesting would be a game-changer that could put a dent in CSS preprocessor usage. And there are so many new color features today and in the works that are sure to impact the way we define and use colors. But I also suspect that @container becomes a much bigger deal as browser support catches on and we find ourselves writing more container queries where we may have reached for media queries in the past.
What it is: This is more of a live dashboard than a report. It analyzes data from a fixed point in time, displaying results from the web-platform-tests which are a group of test suites for many web platform specifications that run daily. The idea is that we can see which web features are broadly supported, which ones aren’t, and how browsers rank in terms of supporting them.
What it found: It’s less about what this dashboard has found than what it is currently showing. And right now, Safari is leading the pack as far as supporting what the focus areas are for 2022, which include newer features like Cascade Layers, Container Queries, the <dialog> element, Subgrid, and viewport units. Safari scores 89% in the tests, with Firefox right on its heels at 88% and Chrome/Edge not far behind at 84%.
If you look at the scores for the experimental versions of those browsers, Safari Technology Preview jumps way up to 94% while Firefox and Chrome/Edge sit at 88%. It’s really tough to make the whole “Safari is the new Internet Explorer” point these days, at least when it comes to these focus areas. There are other legitimate criticisms of it for way different reasons that are tied to iOS.
What it is: A survey of approximately 7,000 members of the Jamstack community that provides a snapshop of who Jamstack developers are and the sorts of things they’re working on.
What it found: This survey is interesting as heck because it offers a peek into things like job titles and employment on top of Jamstack-specific stuff. For example, four out of five developers are now working remote most of the time and half of those would quit their jobs if they had to return to the office.
Here’s another neat trend: In 2021, 32% of folks referred to themselves as “full-stack developers” in 2021 while 45% called themselves “front-end developers”. That practically swapped in 2022, with 44% of respondents calling themselves “full-stack” and 32% going with “front-end”.
You’ve gotta look at the full set of results to get even more insights on what Jamstack developers are building and how they are building those things. Like, WordPress is still the most widely-used CMS at 59% of respondents (22% of which is headless WordPress), but surprisingly, Notion is quickly gaining traction in the Jamstack CMS space, at 26%. I’ve been interested in Notion as a CMS ever since Chris wrote about it 2020.
What it is: A survey of 2,660 developers by the Open Source Initiative and OpenLogic that tracks the usage of open source projects and contributions to them. The survey was open for six weeks and attracted responses from 15 countries.
What it found: The Open Source Initiative published their 10 takeaways from the report. Among those? 79% say they sponsor open source organizations (which might be expected from this audience). Deeper in the report, jQuery (31%) is still ranked as the top technology for app development. React (27%) clocks in at second, and Angular (26%) comes in at third.
What it is: A survey of more than 70,000 developers to measure how they learn, which tools they’re using, and what they want in the future.
What it found: I love this survey because it always affirms the amount of time I spend looking things up. 87% of folks spend at least 30 minutes searching for answers to problems, 25% of which spend an hour or more. The survey found that a team of 50 developers spends between 333-651 hours of time looking up answers per week.
Otherwise, JavaScript is the most used language for the tenth year in a row (but Rust is the most loved) and VS Code is the overwhelmingly popular IDE at 74%.
What it is: Straight from the horse’s mouth: “An exploration of open source software including its impact on the world and companies, plus key trends shaping software development.” It draws on GitHub activity data rather than surveying a group of respondents.
What it found: Whew, 94 million developers used GitHub in 2022! That’s a whole lot more than the 2.8 million who used it in 2012. 20.5 million newbies joined this year alone. Also, there was a 20% year-over-year growth in the number of repos hosted on GitHub, and more than 3.5 billion contributions to GitHub projects over the year. Interestingly, only 20% of all GitHub repos are public, perhaps due to private repos becoming a free feature in 2019.
Nothing new has changed on the languages front. Last year, JavaScript was the most used language and that’s true this year as well. However, TypeScript seems to have slowed down in growth after skyrocketing in popularity last year. I suspected it would jump up a few spots this year, but it’s still in fourth behind Python and Java (which is far from dead).
GitHub Copilot’s impact on developer productivity and happiness
What it is: GitHub published a report on GitHub Copilot, its AI-flavored development assistant. Is Copilot making developers’ lives easier? Is it making them more productive? Those are the sorts of things covered in this report, drawing on survey results they published in an academic paper, and external research on development productivity. There’s good qualitiative feedback in there as well.
What it found: Can you guess it? Yep, those who use Copilot feel more productive than those who do not use it. And those who use it complete tasks ~55% faster than those who do not use it for the same tasks. What it sounds like, if I’m reading this right, is that Copilot users enjoy the way it handles all the “fiddly” things for them — like auto-closing brackets.
Dave’s thoughts on Copilot seem to jive with the report’s description of Copilot being like a pair programmer with a calculator attached. Maybe not the best pair programmer in the world, but one in which your mental model shifts from writing code to checking code.
What it is: A survey of 3,703 developers to “see the real day-to-day perspective from [front-end] professionals of all levels and backgrounds.” What makes this survey a little different is that it also polls 19 invited experts in the field, including — you guessed it — Chris Coyier weighing in on styling tools.
What it found: You know, there’s really more findings here than a mere summary can do justice. This might be the most comprehensive set of results of the whole bunch. There’s so much to grok, from frameworks, hosting, and SSG to browser technologies, code management, and testing. And that only scratches the surface. If nothing else, it’s worth clicking through to the full report just for the analysis from the invited experts.
What it is: A survey all about design systems that’s focused on adoption, contributions, design, technical debt, and how design systems are used. This year’s results reflect the answers of 219 submissions, down from last year’s 376.
What it found: Last year, the survey found that 40% of folks consider their design systems “successful” or “very” successful. Those figures are less obvious in this year’s survey. But more interesting is what’s included in their systems. Sure, typography, colors, components, and layouts are common to most of them. But it’s the lack of things like developer-ready code (65%), accessibility guidelines (57%), and content guidelines (45%) that might be influencing the finding that only 65% of people who identify as design system subscribers say they get what they need from their systems.
What it is: The sixth edition of a survey that looks at the tooling people use for things like prototyping, UI design, design systems, and user testing. This year received 4,260 submissions.
What it found: First off, we’re dealing with a bunch of designers. 82% have “designer” somewhere in their job title, compared to a mere 6% who call themselves developers. That’s reasonable for a survey that’s all about UX tooling.
So, what tools are they using? Figma by a loooooong mile for UI design. 73% report Figma as their design software of choice, followed by a neck-and-neck race between Adode XD (6%) and Sketch (5%) for a distant second. Figma also leads the pack when it comes to basic UI protoyping and managing design systems.
Do you want to know the top tool for storing, tagging, and organizing research? It’s Notion! Funny how it comes up as both an emerging CMS and a research repository in different surveys.
What it is: A survey of HankerRank community members and their development skills, such as the languages they use and their experience with them.
What it found: I don’t know! I tried several times to download the report, but got nothing more than a spinning wheel. The link to the report takes you to a sneak peek with some basic findings, like the top five used languages — Java, Python, SQL, C++, and JavaScript, in that order — make up the overwhelming majority of all reported languages. There’s also findings on the fastest growing languages, which is where TypeScript (182%), PHP (172%), and Go (125%) are dominant. Swift usage fell hard at -42% which is interesting considering the findings in the next survey we’re going to look at.
What it is: A survey of 2,506 developers (down from last year’s 4,072) working on the MacOS platform with the goal of understanding the profile of this specific developer niche.
What it found: Last year’s takeaway was the age of this crowd trending younger, suggesting a growth in Mac-related development. And lots of them really wanted to learn Swift. What changed? Not a whole lot! Most developer are still in the 30-44 age range (40.9%) even though that’s significantly down from 54.8% last year. And the largest age group (19.5%) is in the 35-39 range. They still work with JavaScript most (52.7%) and still want to learn Swift the most (28.2%).
What it is: A report is based on a global online developer survey designed, produced, and carried out by SlashData over ten weeks between December 2021 and February 2022 to measure developer trends, technology preferences, and emerging technology patterns.
What it found: I like that this report breaks down its demographics by gender. And while the result is unsurprising — there are way more men (81%) than women (17%) — it’s still a confirmation of the almost tangible dismal gender equality in the development industry as a whole.
Wanna know this survey’s top five programming languages? It’s exactly the same as HackerRank’s top five, with one exception: C# knocked JavaScript off the list. I also find it interesting that the top emerging area of interest for this group is artificial intelligence software, beating out augmented reality, robotics, cryptocurrency, and blockchain. Maybe some of these folks are the ones influencing GitHub’s Copilot research findings?
What it is: A survey of more than 37,000 developers (up from 28,000 last year and 13,500 in 2020!) that measures who is developing with APIs, what sort of work they’re doing with them, and how APIs are evolving.
67% of developers say they’ve adopted an API-first philosophy and 94% say they believe their companies will either invest more or the same in APIs in the next year. We’ll see when those results roll in next year!
The same data point this year says that number is down to 89% — and with a larger pool of survey participants. That said, Postman API requests skyrocketed from 855 million last year to 1.13 billion this year. Wow. I’d say last year’s prediction that more companies would investment in API usage this year is spot on.
The most popular APIs? That group includes known entities like Salesforce and Twitter, but welcomes Notion to the list — it’s really been a banner year for Notion according to many of the surveys in this roundup.
What it is: A survey all about WordPress hosting that polls people who read the CodeinWP blog. They received 3,400 submissions this year. They’ve apparently been doing this survey since 2016 but it’s slipped under my radar until this year.
What it found: GoDaddy is the hosting provider of choice for this group, which was the story in 2019 and 2020 as well. But it only represents 11.8% of survey participants. The market is pretty crowded with Bluehost (8.4%), Hostinger (4.8%), and HostGator (3.4%) trailing behind. LOLzzz for GoDaddy also falling dead last in hosting satisfaction with 6.3/10 satisfaction rate. WP Engine got the top rating score (9.2/10) but that’s based on just 21 survey participants, compared to GoDaddy’s 377. Plus, the survey notes that many specified “WordPress” as their host… which could either mean they use WordPress.com or are simply confused between WordPress.com and a self-hosted WordPress site. 🤷♂️
What it is: Let’s look at another WordPress-centric survey while we’re at it. This one is run by a group called Sell Courses Online, which is a dead giveaway that it’s focused on learning management systems (LMS) in the WordPress ecosystem.
What it found: I admit I’m super interested in this report because I teach web development in higher education and have played with a bunch of LMSs. WordPress is ripe software for for it, too, with quite a few plugin options. It’s super affordable as well, with most folks (41.3%) spending less than $ 50/month on their tech stack, and 76.2% spending less than $ 250. Most of those low-spend sites rely on a freemium-based LMS model.
And what’s included in that stack? 65.3% rely on WooCommerce for selling courses, 57.5% use Elementor as a page builder, 19% use the Astra theme (while 66% specify others), and 13.5% use Paid Memberships Pro for user accounts.
Hey, what about the actual LMS functionality? LearnDash is is the most popular LMS plugin with 34%, followed by LearnPress (31%) and Tutor LMS (19%). I’ve worked with LearnDash and love it, especially the number of add-ons to extend the functionality with more features as needed.
What it is: It’s funny, but I have a degree in Economics that I clearly haven’t used in my professional career, and there’s a bunch of stuff in here that’s way over my head. What it boils down to, if I’m understanding correctly, is that this report measures the online development of governments across United Nations member states, drawing on a composite of three different indices.
Has the United States progressed in its digital infrastructure and strategies? That’s the sort of thing this report looks at, taking in factors like what online services a country provides, how it approaches cybersecurity, efforts to increase digital proficiencies, and even how technology has been used to address crises like the COVID-19 pandemic.
The first survey was published in 2001. This 2022 survey is the eleventh edition of this biennial publication.
What it found: Honestly, you’d do better reading the press release (PDF) than relying on my uneducated insights. But at a super high level, Denmark, Finland and the Republic of Korea lead the 2022 digital government rankings, “scoring the highest when it comes to the scope and quality of online services, status of telecommunication infrastructure and existing human capacity.”
What it is: The name of the report sorta says it all — LinkedIn looks at the state of the professional learning landscape in workplaces. This is the sixth edition, surveying 1,444 learning and development professionals (L&D), and 610 learners in November 2021.
A lot of this year’s report is written around the COVID-19 pandemic’s impact on learning in the workplace, like how learning has been affected by layoffs and remote work arrangements.
What it found: Learning continues despite The Great Reshuffle/Great Resignation or whatever you want to call the relatively new trend of quitting jobs and changing careers. For example, 46% of L&D professionals say there is a wider technological skill gap on their teams, and 49% say execs are concerned that employees do not have the right skills to meet business strategies. That suggests the post-pandemic technological landscape has created higher expectations as far as employees having relevant technical skills, particularly when it comes to what’s needed for successful remote work.
That, in turn, has led to a rise in demand for workplace learning programs and profressionals. L&D professionals are in higher demand and make more money than they did before. And only 8% expect their L&D budget to decrease in the coming year.
What sorts of learning programs have top priority? Diversity, equity, and inclusion (45%), leading through change programs (42%), in-person training (41%, up from 25%!), upskilling and reskilling (41%), and digital fluency (30%). A lot of soft skills in there!
What it is: While we’re on the topic of changing workplace environments, let’s look at this one that investigates the workplace trends that are changing perspectives on when, where, and how people work — and how businesses are adapting to those changing perspectives.
What it found: The stats are super interesting, but I couldn’t find any information on the methodology it used to get them. Like 50% of businesses have reported higher turnover compared to pre-pandemic times, 38% plan to spend more on independent remote freelancers, and 37% are fully remote today with 28% expecting to go fully remote in a year. What’s going to happen to all those empty office buildings?!
On the employee side of things, 61% say they are more productive when they work remote. 45% of business also report an increase in productivity as a result of remote work and a whopping 63% reduction in unscheduled work absences.
There are other interesting stats on how other things are changing, like traditional work hours, where people choose to work, and the perception of workplace culture.
What it is: Another one from UpWork! This time it’s looking at the overall labor market. And there’s a documented methodology this time, saying that numbers are based on survey results of 1,000 hiring professionals from a third-party as well as findings from a separate study from a separate firm that surveyed 6,000 working professionals.
What it found: Well, UpWork’s “Great Work Teardown” report found that there’s big growth in business relying on remote freelancers. This report confirms that 78% of hiring pros saying they’ve used remote freelancers and 52% saying they are using more of them today than they have in previous years.
Get this: 60% of managers at mid-sized companies report higher turnover since pre-pandemic levels, while only 25% of small companies report the same. And roughly 45% of all hiring managers say they plan to combat turnover by offering more learning programs, confirming LinkedIn’s workplace learning report.
And, hey, if you’re looking for a higher salary or more perks, this might be the time to to strike because around 50% of managers are considering higher salaries and bigger benefit packages to retain staff.
What it is: This survey is new to the collection! It asked 300 web security pros what they consider to be their biggest online threats and how they plan on defending against them.
What it found: The most common attacks were DDoS, with half of the survey’s participants saying they’ve dealt with them in the past year. Next up is SQL injections (38%) and ransomware (29%), where ransomware is considered the most severe threat. (The report also cites a U.S. Treasury finding that U.S. firms paid out $ 590 million in ransomware attacks in the first half of 2021 alone. Geez.)
Also neat: 90% of participants say they are using a public cloud, making cloud-based security more of a thing. (AWS tops the list at 67%. DigitalOcean (4%), the home for CSS-Tricks, is sandwiched between Oracle (7%) and IBM (3%) as an interesting aside.)
API security is tops as far as priority goes. With Postman’s State of the API report showing a year-over-year increase in API requests that goes from 855 million last year to 1.13 billion this year, it’s clear why that is.
(Linking directly to the PDF to save you the registration effort.)
Trend Micro 2022 Midyear Cybersecurity Report
What it is: Let’s keep talking cybersecurity. This report polls 6,297 IT security decision-makers from 29 countries about their thoughts on the cybersecurity risks they face.
What it found: A good chunk of folks (62%) say they have blindspots in their defense strategies and 43% belive that that their exposure to threats is out of control. That’s in line with the Reblaze survey above that reported 50% of folks saying they have no certainty as far as how many bots account for overall traffic. This report notes that 37% of participants cite cloud assets as the area they have the least insight into.
The report gets into a bunch of specific attacks that I had no idea were even a thing. It’s unnerving how attacks seem to get smarter and smarter each year while the businesses continue to increase their exposure to them. This report provides a lot of excellent detail on those threats, including a section devoted to cybersecurity efforts in the Russia-Ukraine conflict.
1Password: The realities of parenting and growing up online
What it is: Let’s heap more on the cybersecurity research pile will this report from the folks behind the 1Password app. This one hits pretty close to home for me because it looks at parenting in the always-online era, which is something pinned to the back of my mind since I have two young daughters who love their screens.
1Password teamed up with Malwarebytes to produce this report, which is based on a survey of 1,000 parents and 1,000 children that were born between 1997-2009 that was prepared by another firm, Method Research. The data is fresh having been collected in August this year.
What it found: A bunch of stats I wish I could unsee. Like 74% of parents think they’re keeping their kids safe, while only 51% agree. And 74% of kids have ways to workaround being monitored by their parents (where 9% claim to have a secret device their parents don’t know about). Cyberbullying is the top concern for both parents (73%) and kids (66%).
Parents also need to be more responsible. 73% of kids wish their parents would ask for permission to post photos of them while only 34% of parents actually ask (and — eek! — 39% don’t believe they need to ask permission). The importance here is that 11% of kids say they’ve been stalked or bullied because of something posted by their parents, and 12% report being harmed in some way, whether its hacked accounts, stolen identities, or tarnished credit cores.
The Eclipse Foundation 2022 IoT & Edge Developer Survey
What it is: A survey of 910 global developers, committers, architects, and decision-makers that took place between April and June 2022 to spot trends in the Internet of Things (IoT) space. You know, like that smart fridge in your kitchen and voice-controlled curtains that shade your living room. That and more serious stuff like trends in artificial intelligence and edge computing.
What it found:Last year, I called Microsoft’s IoT findings “mostly nice trivia for cocktail chatter.” This report is a lot more granular and is probably most helpful for those working in the space, as there’s so much information on the stacks that developers use and overarching concerns about them. I mean, I don’t particularly care that “64-bit ARM architectures are gaining ground with gateway and edge node suppliers.” But I bet that’s super important to some of you reading this.
(Linking directly to the PDF to save you the registration effort.)
CampaignMonitor Ultimate Email Marketing Benchmarks for 2022
What it is: A study of benchmarks related to email marketing based on 100 billion emails delivered on CampaignMonitor’s platform in 2021. It looks at things like open and click rates, and breaks them down by industry to help folks get the most out of their email marketing campaigns and know how to gauge success.
What it found: It’s probably better for you to see their table of results by industry rather than having me regurgitate the results of all 19 industries they identified. But on a global level, a 21.5% open rate is quite average across all industries, as is a 2.3% click-through rate. It appears Monday produces the highest open rate (22% on average) while Sunday produces the lowest (20.3%), so not a whole lot of variance there. Same deal with click-through rates, where Tuesday is highest (2.4%) and Saturday and Sunday share the lowest rate (2.1%). Again, not a lot of difference but it could be helpful knowing this stuff if you’re trying to milk every last drop out of a campaign.
We looked at 27 different reports on front-end and front-end-adjacent topics! That’s more than the 25 we covered last year and the fitting number of 20 we looked at in 2020.
If there’s one BIG takeaway from all these takeaways, it’s to remember this is all in good fun. Many of the studies lack the scientific methods we’d want to base decisions on, and the sample sizes are far too small to accurately reflect reality. But they sure are interesting, right?!
Some reports are annual, some are one-off, and others seemingly happen whenever the heck they wanna do it. So, if I missed any from previous years, it’s probably because they aren’t annual or just aren’t available as I’m writing this. As always, let me know if there’s a report I missed and I’ll try to work it in.
There’s a lineup of 12 awesome speakers — including Chris Coyier, Cassidy Williams, Kevin Powell, and Angie Jones — each discussing various front-end and web dev topics. It’s like the 12 days of Christmas, but wrapped up in a four-hour session for web nerds like us.
It’s a real good cause, too. The event is free, but includes fundraising Doctors Without Borders with a goal of reaching $ 20,000. You can donate here any time and anything you give will be matched by the event’s sponors. So, come for the front-end fun and help a great cause in the process.
Is it Fall? Winter? I don’t know, but I woke up with snow in the front yard this morning and felt like it was time to write a little update about what’s been happening around CSS-Tricks this past month, as we’re known to do from time to time.
First up is the CSS-Tricks Newsletter! It’s starting to feel like we’re getting our rhythm down after months of hiatus. The last edition went out at the very end of October. That’s the third consecutive month we’ve been able to shoot it out which I’d call a big win for consistency. Nah, it’s not the weekly cadence we had before, but that’s something we’re aspiring to as our team continues to establish itself.
Speaking of which — we have a new team member! We brought Andrea Anderson on board. She’s a well-established technical editor and we’re lucky as heck she’s here. While she might work on a CSS-Tricks piece from time to time, her main focus is working on content that’s integrated into DigitalOcean’s Community site.
Oh, and while we’re on the topic of DigitalOcean’s Community, check out this Developer Markepear post deep-diving into DigitalOcean’s writing process. Seriously, it’s an incredibly deep dive that gets into the way tutorials are outlined and structured, the UX of navigating the tutorial archives, and even the delicate interplay between the content and advertising in each article.
I really like how DigitalOcean’s tutorials are described as “give-first” content that “has a smell of value all over it.” It speaks volumes about the team’s work ethic, which I can personally attest is top-notch. It’s really the reason DigitalOcean and CSS-Tricks make a great match.
Advertising is also pretty top-of-mind for us right now. When we ran a survey the other month, we knew that there’d be concerns about how CSS-Tricks ads would be affected after the DigitalOcean acquisition. Would we remove them? Make them all about DigitalOcean? Keep everything as-is? I mean, CSS-Tricks has traditionally relied on an advertising model to keep the lights on, but now that it’s backed by a company, how much do we really need to rely on ads at all?
Turns out many of you like the ads, according to the survey. They’re sort of like product recommendations baked into the site, and I think that’s a testament to Chris’s effort to make sure ads are (1) promoting good stuff and (2) are relevant to the front-end work we do. Case in point: we recently swapped out a bunch of DigitalOcean ads to promote Cloudways hosting after DigitalOcean acquired it. Those ads didn’t do so well, so we swapped the DigitalOcean ones back in, which were already doing quite well.
(The advertised deal is pretty darn good, by the way… $ 200 in free credits to spin up your project.)
The work to move CSS-Tricks from WordPress to the same CMS the DigitalOcean Community uses for its content is still in progress. A lot of the work is still mapping WordPress content fields to the new CMS. That’s no trivial task when we’re talking about a website with 7,000-odd articles over a 15-year span. That’s going well, as is the initial site architecture. Next up, we need to figure out how we’re handling WordPress blocks, replicating their features, and creating an inventory of all that we need to carry over. Phew!
New faces!
As always, we tend to have a few new faces on the site each month as we work with new guest authors. This month, we welcomed Krzysztof Gonciarz and Lorenzo Bonannella. Check out their articles and give ’em a high five for sharing their work. It takes a lot of work to write, not to mention some courage to put your ideas in front of other people. So, thanks a bunch Krzysztof and Lorenzo!
Meet Mojtaba Seyedi
I thought catching up with one of our long-time writers would be a nice way to cap off this month’s update. And few people have contributed as many articles to CSS-Tricks as Mojtaba Seyedi. You may not see his name pop up in the archives all that much, but it’s only because he spends so much time in the Almanac.
I asked Mojtaba a few questions about his work and he graciously responded with these answers…
Your very first article with us was a roundup of plugins for the Sublime Text editor way back in 2017. What made you think to publish it on CSS-Tricks?
I used to be very passionate about the Sublime Text editor and its plugins. I could always find a plugin to ease the pain whenever I was tired of doing repetitive tasks. I would show my co-workers how interesting whatever plugin I was using was and encourage them to use it.
One of my New Year’s resolutions back then — in 2017 — was to publish an article on CSS-Tricks. I always thought the idea had been highly technical. It never occurred to me I could simply create a list of Sublime Text plugins that I happened to find useful for development! Nowadays, I can see how the high bar I had set was preventing me from writing about something that I loved.
There was a brief moment when I considered giving up on that first article. I had psyched myself out thinking that there were tons of other posts already covering the exact same thing. But out of curiosity, I Googled some of the top Sublime Text plugin posts, and surprisingly, I didn’t see any of the plugins I was writing about. So, that’s how I submitted my first article on this website!
You’ve written a total of 35 articles for CSS-Tricks, 33 of which are in the Almanac. What do you enjoy about writing technical information like that?
Almanac entries are referenceable. We keep coming back to them to check the syntax of a property or a selector. For example, we might need to visit the background shorthand property to remember whether the background-position value goes before or after the slash (/). References never get old, which is why the Almanac is special to me.
Along the same lines, documentation is challenging. One of the challenges of writing for the CSS-Tricks Almanac is reading and understanding the W3C’s specifications. For example, when I wanted to write about the mask-border property, the CSS spec was practically my only source. I needed to figure out all the aspects of that module and how different values behave in different situations because there were scant examples in the wild. I enjoy that sort of challenge and feel great when I can turn my findings into something tangible that other developers can understand and use in their own work.
There’s also the joy of completeness. Documentation allows me to get deep into details that might not make it in a typical article. I get satisfaction when I’m able to grasp a property or selector and explain it in my own words. The CSS-Tricks Alamanc gives me that opportunity.
What can you say about the editing process for those who haven’t gone through it?
First, enjoy a clean and easy process. The CSS-Tricks editorial team will help you improve it and make it better than you can on your own.
Also, be sure to edit your draft first. Always edit the article yourself before submitting it. The more ready your writing is, the more time it gives the editor to help you improve your work. If the editor needs to spend a lot of time fixing basic grammar and spelling, that’s time that could have been spent pushing the idea further with feedback and other considerations.
And, of course, learn from your mistakes. Be open to learning while you’re in the editing process. The editorial team here is very experienced and helpful. I try to review what they have changed in my article and put them into practice in my next writings. I would love to thank Geoff, from whom I have learned a lot about technical writing.
Do you have any tips for someone thinking about submitting an article proposal?
Do not overthink the idea. Your article doesn’t have to be rocket science. Anything you know well enough to write about can be helpful to others.
Another piece of advice: do not underestimate yourself. When Chris Coyier invited the community to contribute to the CSS-Tricks Almanac, I told myself there were many more qualified people who could do that, even though I had experience writing CSS docs. And yes, many folks were (and maybe still are) more knowledgeable than me. But as it turned out, I could be a part of this because I was willing to try.
Another big deal is to not worry about repeating others.Your idea doesn’t have to be unique. You can write about something others have written about in a new and different way. Your point of view and perspective matter! Your approach to solving a problem and how you explain it might be different in a super helpful way.
I’m sure there is a blog post or article about this same topic somewhere on the web. But I would like to write about it here on CSS-Tricks. See? I want to share my own perspective with you and I want to explain it in my own way.
There may have been a time when it was possible to know most CSS properties and how they work. Those days are long-gone, at least for an old hand like me. But that sort of begs the question: what CSS do you absolutely have to know?
Vincas Stonys recently took a stab at a list. Chris put one together based on features released since CSS3. You probably have an idea of what you would include in a list. If I had to put a Top 5 together and limit myself to only properties and selectors, it might look something like this…
writing-mode
I can’t say enough about the writing-mode property. What makes it important — especially from a learning perspective — is that it sets you up for inclusive principles that account for crafting layouts, regardless of the user’s language. A good understanding of writing-mode is going to lead to an understanding of logical properties and values, and those, in turn, set the stage for understanding document flow and thinking in terms of block, inline, start, and end rather than physical directions.
display
I have a hard time believing anyone can write good CSS without having a solid grasp on the display property. It’s both a property and a framework for creating layouts. There’s no Flexbox or CSS Grid without it, making it sort of like a gatekeeper to understanding those important features.
Plus, the display property perfectly complements writing-mode. It’s exactly what you’ll need once writing-mode has exposed you to document flow and logical directions. You’re going to need a property to either change an element’s normal flow (like changing a block element to an inline one) or start laying things out (like creating a flexible layout context) and that is where display comes into play.
margin / padding / border
Ugh, I’m totally cheating here but think learning margin, padding, and border together is sort of unavoidable. They’re all parts of The Box Model, all help with spacing and styling, and all require getting acquainted with CSS length units. Knowing what these properties are desgined to do and how they contribute to the computed size of an element certainly gives you a lot more styling control, and dispels any confusion about why an element is the size that it is — a common CSS headache!
::before and ::after
Another one where I’m cheating a bit. Yes, ::before and ::after are two individual pseudo-elements, but again, I can’t imagine learning about one without the other. It’s a two-fer!
I remember how mind-blowing it was for me to learn that these existed and can be used to create everything from cool UI effects to complete single-div illustrations. It opens up new possibilities and provides a first peek at how powerful CSS really is.
@media
Oof, I’m already at my fifth and final item in the list and feel like there’s still so much CSS goodness that belongs here. But if I have to choose one last thing, it would be media queries. Why? Because it’s a prime ingredient for creating fluid, flexible layouts and different viewing contexts. Container queries might wind up knocking this off my list as it matures, but for now, @media is a great primer for responsive design.
Beyond that, @media is a nice first step into the conditional qualities of CSS. Whether we’re writing a query based on the type of device thats being used (e.g., screen or print) or a when the browser’s viewport meets a certain criteria (e.g., width >= 768px), the @media syntax is incredibly useful for creating layouts that are optimized for different conditions.
Oh, and we haven’t even touched on how @media relates to accessibility, thanks to its ability to apply styles based on a user’s preferences (e.g., prefers-reduced-motion). So, in addition to crafting conditional layouts, media queries are a nice next step toward understanding inclusive design.
Honerable mentions
Distilling CSS into a list of five must-know properties and selectors is tough, especially now that CSS more powerful today than it was, say, even five years ago. There are a number of other items I really wanted to include, like (in no particular order):
calc()
has()
color
font
overflow
position (especially this)
z-index
But I stand by my choices. Learning CSS is more important than memorizing a list of properties. It’s a journey and I think the five I chose carve a nice little learning path that sets the stage for writing good style rules and next steps for diving deeper into CSS.
Alright, tell me yours!
Disagree with my list? You should! I’ll bet you have some smart opinions and I want to see what how you would have rounded out a Top 5 list.
Well, hey, welcome back to Behind the CSScenes! These posts are like little check-ins we’re doing each month to give you a peek behind what we’re doing here at CSS-Tricks, as well as a chance for us to pause and celebrate a few things.
Last month, we shared a small taste of a redesign for this very site. Thanks to all the folks who wrote in to comment on it! Seems the overwhelming response is pretty dang positive, though the background color was a mixed bag of reactions.
There’s more work to do, of course! This month, we have a little more to share with you on the development side of things, plus a roundup of some recent activity around here. So, let’s dial in Haley Mills for the latest.
Content updates
[Haley:] September was a busy month for our team! We published 16 articles by guest authors and another 15 by folks on our team. In addition to these, we’ve been updating many of the older articles, including adding freshly-linked resources. We’ve already updated over 50 articles and will continue these efforts as part of our day-to-day work. Thank you to the team and the awesome authors who contributed this content!
To build on our efforts to provide front-end developers with the tools they need, I’m also super excited to share that we are starting to kick the tires on new guides. Guides have been a free, helpful resource to the CSS-Tricks Community since the first one was published in 2019, and we’ve known from day 1 that we need to keep this tradition going. Since this is a new process for our team, we want to ensure that the workflow for authors is completely snag-free before opening it up to the public to apply. Until then, we will be working with hand-selected authors to bring you new guides on a variety of topics.
Have a suggestion for a guide that you’d love to see? Let us know in the comments!
Finally, you might’ve heard the news that CloudWays is joining DigitalOcean and is offering a $ 50 credit to folks in our community! While our top priority will always be to provide platform-agnostic resources to CSS-Tricks readers, you can expect to see helpful content about CloudWays in the future because we truly believe that their managed solution could be a great fit for the community.
Thanks for reading the content updates! Next up we have our senior web developer, David Berg, with an update on the back-end work we’re doing to move CSS-Tricks to a new CMS.
What’s happening on the back end
[David Berg:] The DigitalOcean team is actively working to pluck CSS-Tricks from WordPress and drop it into the same hand-rolled CMS we use for our other sites, including DigitalOcean’s library of tutorials. Don’t worry! CSS-Tricks will still be the same standalone site at the same domain, hyphenated and all. But it’s a ton of work, as you might imagine!
If anything has been challenging so far, it’s been aligning the WordPress data from the current site with the structure of our internal system. Our team currently uses a properly vetted, maintained, and organized PostgreSQL database that interfaces with the client through an array of in-repository services over which we maintain tight code control and quality. The WordPress database structure is unintuitive — at least to me and our team — and has required our team to find obscure and maybe overly complex solutions to mash these things together.
That said, migrating CSS-Tricks content over to our in-house solution allows us to ensure the integrity and future-proofing of complex database relationships. Through this process, we can slim down the time it takes to query the database, improve efficiencies of three (or more)-dimensional relationships, and accurately model new relationships according to new features we might develop down the road.
In short, that means we will no longer be reliant on a monolithic WordPress instance to serve a response to every request. We can statically export all the publicly accessible content to a CDN, with the services handling edit operations only when needed.
It’s easier to submit article proposals!
[Haley:] Speaking of a more robust back end architecture, something else happening behind the scenes is a new form for guest authors submitting article proposals to us for publication.
We used a form before this one, but we had it tied up with Jira in a way that helps us manage the proposals and keep track of where they are in the editing flow. That integration was crumbling right before our eyes, so we went with a Typeform-powered version instead.
While it might seem like a fairly minor thing, it’s a big deal as far as making it easier to share your proposals and making sure nothing falls through the cracks — so we have fresh new front-end content to publish for you on a consistent basis!
Oh, and if you happen to submit a proposal (and you should!) please let us know if you see any opportunities for us to make it even easier and more helpful.
Passing it back to Geoff with my favorite part of these updates: author highlights!
Some fresh new faces around here
[Geoff:] The articles you read here at CSS-Tricks are written by folks like yourself. It’s amazing just how gosh darned smart this community is and all the ideas that get passed around here. In fact, we welcomed 5 new voices this past month:
What a great bunch, right? Give ‘em all some love for taking time out of their busy lives to share their wisdom and clever tricks with the rest of us. And a shout out to familiar faces, like Temani Afif, Preethi, Ollie Williams, and Mojtaba Seyedi for all the hard work they continue to do that keeps pushing this thing we call front-end development forward.
High fives to all these folks, and to you for reading. ✋ We wouldn’t be doing this without y’all.
An Event Apart 2022 Denver wrapped up yesterday. And while I was unable to make it to all three days this time, I did catch yesterday’s action — and it was awesome. I’m not very social or outgoing, but this was the first conference I’ve been to in at least a couple of years, and seeing folks in person was incredibly refreshing.
I took notes, of course! I thought I’d post ’em here because sharing is caring. At least, that’s what my six-year-old told me the other day when asking for a bite of my dessert last night.
I’ll break this down by speaker. Fair warning: I’m all about handwritten notes and a pretty visual fella, so my notes tend to be less… structured than most. And these notes are just things that stood out to me. They may not even be the presenter’s main idea, but they caught my attention!
Chris has given this talk before (we linked it up just last week), but this time expanded it substantially, particularly with details on container relative units which, when combined with clamp(), make for more accurate responsiveness because the values are relative to the container rather than the viewport. So, you know how we often use viewport width (vh) units for fluid type?
font-size: clamp(1rem, 1rem + 2vw, 2rem);
Well, we can use a container relative unit like container query inline-size (cqi) instead, where 1cqi is equal to 1% of the container’s inline size (here’s the draft spec on that):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);
Chris also talked quite a bit about the performance benefits of hosting at the edge. Probably no surprise because he’s writtenabout ithere more than a few times. Even as someone who had already read those articles, I honestly didn’t realize the complete concept of computing at the edge.
The idea is deceptively simple: global CDNs can serve assets quickly because they host them geographically close to the user. That’s pretty standard practice for serving raster images. But it has extended to static files, such as the same HTML, CSS, and JavaScript files that power a site — build them in advance and serve the already compiled and optimized files from the speedy global CDN. That’s the whole Jamstack concept!
But what if you still require a server response from it? That ain’t very edge-y, is it? Well, now we have handlers capable of running on a single URL fetching data in advance, and injecting it ahead of render — directly from the CDN. Sure, there’s extra work happening in the background. Still, the fact that we can dynamically fetch data, inject it, pre-build it, serve it statically on demand, and have it run geographically closer to the user makes this blazingly fast.
Tolu Adegbite: How to Win at ARIA and Influence Web Accessibility
Good gosh was this an excellent presentation! Tolu Adegbite schooled me so hard on WAI-ARIA that I had a hard time jotting down all the gems she shared — Roles! States! Labeling! Descriptions! Everything was extraordinarily well-covered, and stuff that I know I’ll be coming back to time and again.
But one specific thing that caught my attention is the accessibility of inline SVG. Even though SVG is related to other types of design assets, the fact that it is markup at the end of the day sets it apart because it isn’t always identified as an image.
<!-- Image tag is easily recognized as an image --> <img src="cat.svg" alt="An illustrated brown and white tabby kitten looking lovingly into the camera."> <!-- Could be an image, maybe not? --> <svg viewBox="0 0 100 100"> <!-- etc. --> </svg>
Assistive tech is more likely to read inline SVG as an image by giving it a proper accessible role and label:
<svg role="image" aria-label="An illustrated brown and white tabby kitten looking lovingly into the camera." viewBox="0 0 100 100" > <!-- etc. --> </svg>
Hey, another CSS-Tricks alum! Miriam has been spending a bunch of time and effort on the Cascade Layers specification. She also wrote a big ol’ guide about them here at CSS-Tricks and talked about them at An Event Apart.
What has stuck with me most is how big of a mental shift this is. The concept isn’t complicated, per se. Declare @layer at the top of the CSS document, list the layers in order of specificity, then write styles in those layers. But for an old dinosaur like me who has been writing CSS for a while, I’m going to have to get used to the fact that Cascade Layers make it possible for a simple class selector to beat out something that usually wields a higher specificity, like an ID.
🤯
Miriam also reminded the room that Cascade Layers are just one tool we have in our specificity-managing toolbelt, in addition to selectors that affect specificity (e.g., :is(), :where(), and :has()).
Oh, and this is an interesting tidbit. As Miriam walked through the history of specificity in CSS, she recalled that !important was initially designed as a tool for users to override user agent and author styles. But somewhere down the line, we’ve adopted it to force author styles to the top. Cascade Layers help remove the excuse need to use !important because they provide us the power to “prioritize layers and protect inheritance.”
That is beautifully said, Miriam!
Dave Rupert: Unblocking Your Accessibility Backlog
Imagine waking up one day to hundreds of GitHub notifications about reported issues on your site. Where do you even begin? Maybe close your laptop and get a root canal instead? That happened to Dave! An automated accessibility audit returned a massive pile of errors and assigned them as tickets for Dave to fix.
But he noticed a pattern after taking an Excel spreadsheet of those issues, moving them to Notion for a better view, hiding unnecessary columns, categorizing everything, and displaying the results in logical groups. Many of the reported issues were the same issue repeated on multiple pages. Just because an automated test returns a handful of errors doesn’t mean they’re all unique. That reduced a nice chunk of the tickets.
He went on to show how — with relatively little effort — the backlog of issues dwindled by nearly 50%.
There’s a lot to glean there, especially regarding how we process and organize our work. The biggest takeaway for me is when Dave said we have to emphasize individuals and interactions over processes and tools. Tools like the one scanning for accessibility errors are helpful, but they might not tell the entire story. Rather than take them at their words, it’s worth asking questions and gaining more context before diving into the mess.
As a bonus, reorganizing the issues in Notion allowed Dave to group issues in a way that clearly shows which impairments his product was actively discriminating against, giving him greater empathy for those misses and how to prioritize them.
One more virtual session by Hui Jing Chen capped the day, but admittedly, I missed about half of it because I was having a hallway conversation. The conversation was worth it, even though I am bummed I missed the presentation. I’ll be watching the video of it when it’s published!
The State of CSS survey recently opened up. Last year, the survey confirmed everyone’s assumptions that TailwindCSS is super popular and CSS variables are mainstream. It also codified what many of us want from CSS, from Container Queries to a parent selector. (Spoiler alert, we now have both of ’em.)
While I wouldn’t say the results have been super surprising each year, this time I’m excited to start seeing more historical trends reveal themselves. The survey has been running since 2019, so that’s going to be four years (ancient in front-end years!) of data to see if certain frameworks came and went, specific features are gaining momentum, what general learning practices are out there, and just plain more context. It takes time for stuff to build up like this, so kudos to Sacha Greif for keeping this thing going.
And speaking of the team behind the survey, Lea Verou is new to the bunch and lead this year’s edition. Lea made some nice additions, including more open-ended comments, questions about browser inconsistencies, and a question that compares the amount of time you write CSS versus JavaScript.
Browsers actually use this stuff to help prioritize what features to work on — so definitely add your voice to the mix! The polls close on October 20.
Browsers are constantly adding new HTML, JavaScript and CSS features. Here are some useful additions to working with forms that you might have missed…
requestSubmit()
Safari 16 will be the final browser to add support for requestSubmit.
Before we look at how .requestSubmit() works, let’s remind ourselves how programmatically submitting a form with JavaScript works when using the .submit() method. Submitting a form with submit() does not trigger a submit event. So in the following code, the form is submitted, preventDefault() has no effect, and nothing is logged to the console:
const form = document.forms[0]; form.addEventListener('submit', function(event) { // code to submit the form goes here event.preventDefault(); console.log('form submitted!'); }); document.querySelector('.btn').addEventListener('click', function() { form.submit(); })
.submit() will also ignore any HTML form validation. Given the following markup, the form will be submitted when the input is empty even though the input has a required attribute:
.requestSubmit() is an alternative way to submit a form using JavaScript, but in contrast to .submit(), HTML form validation will prevent the form from being submitted. If all the data entered in the form passes validation, the submit event will be fired, meaning “form submitted!” would be logged to the console in the following example:
You could already achieve this by programmatically clicking the form’s submit button, but requestSubmit is perhaps a more elegant solution.
submitter property of submit event
The SubmitEvent.submitter property gained full cross-browser support with the release of Safari 15.4. This read-only property specifies the <button> or <input type="submit"> element that caused a form to be submitted.
When you have multiple submit buttons or inputs, each with a different value, only the value of the button or input that was clicked on to submit the form will be sent to the server, rather than both values. That’s nothing new. What is new is that the event listener for the submit event now has access to the event.submitter property. You can use this to add a class to the button or input that triggered the form submission, for example, or to obtain its value or any other of its HTML attributes.
This isn’t particularly new, but only achieved cross-browser support with the release of Safari 15. The main use case for the formdata event is enabling custom elements to take part in form submissions. Outside of web components, though, it can still be useful.
You add a formdata event listener to the form you want to interact with:
The event is fired both by a regular HTML form submission and also by an occurrence of new FormData(). event.formData holds all of the data being submitted.
function handleFormdata(event) { for (const entry of event.formData.values()) { console.log(entry); } }
The callback function for the formdata event listener runs before the data is sent to the server, giving you a chance to add to or modify the data being sent.
function handleFormdata(event) { event.formData.append('name', 'John'); }
You could have modified or appended the FormData inside the submit event handler but formdata allows you to separate out the logic. It’s also an alternative to using hidden inputs in the markup of your form in cases where you are submitting the form “the old fashioned way” — i.e. relying on the built-in functionality of HTML to submit the form rather than doing it with fetch.
showPicker() for input elements
showPicker() has been supported since Chrome 99, Firefox 101, and in the upcoming Safari 16. For an input element whose type attribute is either Date, Month, Week, Time, datetime-local, color, or file, showPicker() provides a programmatic way to display the selection UI. For color and file inputs, it’s always been possible to programmatically show the picker by calling .click on the input:
That approach doesn’t work on date inputs, which is why this new API was added. .showPicker() will also work with color and file inputs but there’s no real advantage to using it over .click().
Inert attribute
It’s always been possible to disable multiple inputs at once by wrapping them in a HTML fieldset and disabling the fieldset:
Inert is a new HTML attribute. It isn’t only for forms, but forms are certainly a key use-case. Unlike the disabled attribute, inert can be applied to a form element itself. Everything within the form will be non-focusable and non-clickable. When it comes to assistive technologies, inert is similar to setting aria-hidden="true". Unlike the disabled attribute, inert does not apply any styling by default, but it’s easy to add your own:
form[inert] { opacity: .2; }
There’s more to come…
The big one is styling <select> elements, something developers have wanted for decades. It looks set to finally become a reality sometime soon with the introduction of selectmenu.
But that’s it for now! The recent updates bring full browser support to form features we’ve been waiting for, making them prime for production use.
Those of you who have been reading CSS-Tricks for a while may remember that we used to publish a little thing we called CSS-Tricks Chronicles. Our friend Chris Coyier would write up a reflection from the past couple of months or so, and it was a great way to get a pulse on what’s happening around CSS-Tricks, the site, and what the team is doing.
We like that and want to keep it going. It’s a new era, though! So what we’re going to do is welcome you back to what we’re now calling Behind the CSScenes. You’re going to meet some new and familiar faces in these updates, starting with Haley Mills, who is kicking off the very first issue.
How’s the transition going?
[Haley Mills:] Before we dive in, let me start by introducing myself! My name is Haley, and I’m the manager of Content Integration here at DigitalOcean. I’ve been at DigitalOcean for 5 years and previously worked on our editorial team, helping authors publish all sorts of topics through our Write For DOnations program.
Many folks here at DigitalOcean (including myself) are avid readers of CSS-Tricks, and we still have to pinch ourselves for how lucky we are to be entrusted with this community. We recognize that CSS-Tricks is a critical free resource for devs across the world, and my goal is to keep it that way.
Since the acquisition, we have published 95 pieces of new content and look forward to growing that number.
In the month of August, we performed maintenance on 6 existing pieces of content.
That said, change is to be expected when passing a torch.
I think we all know that no one can replace Chris’ voice — it’s a big reason why CSS-Tricks is, well, CSS-Tricks. His ability to have you laughing while learning something new is a skill that few can compete with. I know many of you miss his writing because you told us so in a survey (which we’ll get to in a bit), but it also opens up a huge opportunity for us all to take the torch and continue doing what CSS-Tricks does best:
Find creative solutions to problems and share them with the world. Chris brought people together this way on CSS-Tricks — and you can give back, too.
Your blossoming idea could turn out to be what the Flexbox Guide is for me and so many other people, so I humbly encourage you to reach out in our Guest Writing Form and talk to us about your topic ideas. We have two awesome editors, Geoff and Brad, to help you shape and bring your ideas to life to share with the CSS-Tricks community. In addition to paying you for your contribution, we will now also make a matching donation to a tech-focused charity of your choice.
Next up, we have Product Manager Karen Degi with some survey result highlights.
The results are in…
[Karen Degi:] In June, we shared a survey to collect feedback to help shape the future of CSS-Tricks. We received almost 900 responses, including some great written responses that helped us understand what CSS-Tricks means to the larger community.
Many of you also volunteered to talk to us directly, which has us thinking about the best way to gather those thoughts. If you’re one of those folks, know that we haven’t forgotten about you and still want to hear from you. We just want to make sure we approach this in the most effective way!
The survey confirmed some things we already suspected and brought new things to our attention. The top few things that grabbed our attention are:
Engaging, high-quality content is at the heart of CSS-Tricks. We’re working to make sure that we continue investing in in-depth guides on front-end topics, as well as providing short articles about quick tricks and tutorials with embedded demos.
You love RSS! As we continue investing in CSS-Tricks and bringing new functionality, we’ll make sure we keep an eye on how our changes affect the RSS feed.
You come to CSS-Tricks to learn, to be entertained, and to do your jobs better. You do not come to CSS-Tricks because you’re excited about being sold…well, anything, really. Although we think DigitalOcean is pretty great, and we’ll probably continue to talk about ourselves where it makes sense, we understand that we need to do so in a way that is honest, trustworthy, and connected to your needs as a front-end enthusiast.
Next up is Logan Liffick, Senior Digital Experience Designer, with redesign updates.
A redesign is in the works!
[Logan Liffick:] If you’ve worked on the front end — or really anywhere on the web, you’re bound to know CSS-Tricks. It’s where I, and many others, started the journey. So, when I was asked to spearhead a redesign for the site, it was nothing short of an honor. Without a doubt, undertaking a brand update for something so familiar to so many is a challenge of incredible magnitude
If I were to do justice to this project, I’d need to pay tribute to the original. That mentality became the underlying theme of my work, and any effort to rejuvenate took inspiration from existing patterns and styles from the site.
Upon first glance, you’ll notice the fresh coat of paint. Past that, you’ll recognize the site reads more “editorial” than before. This was a purposeful decision to accentuate existing type stylings and, more importantly, to pay homage to the essence of CSS-Tricks as an informational resource.
Preserving the element of “fun” was also top of mind. Sprinkled throughout the site are various snippets from the actual CSS “tricks” shared on this site — for example, there’s going to be a little Easter egg tucked inside a sticky footer using Preethi’s slide-out effect that’s my personal favorite, a fantastic suggestion from Geoff himself. Gradients are now a core color-way in the system, and border-radii have been rounded out.
We wanted to give ourselves permission and space to explore an open-ended and malleable system far into the future, which lines up nicely with the overall mission and goal of CSS-Tricks: to explore what’s possible with CSS. This is just the beginning, there’s so much more to see, do, and learn with CSS-Tricks living in our (digital) ocean.
Next is Geoff with author highlights!
New authors!
[Geoff:] We’ve added a few new faces to our growing list of guest authors who have contributed to CSS-Tricks:
You may have also seen our editor Bradley Kouchi’s name pop up a couple of times, and you can expect to continue seeing him on a semi-regular basis.
That’s 16 new authors! You can be one, too, by filling out our guest writing form.
On a related note, I’m pleased as punch that we still get regular contributions from a large band of familiar faces from before the DigitalOcean acquisition. Just look at all the fine folks who’ve continued to share their great ideas with us:
Big shake-ups like the one we’re going through today can be scary. Seeing these familiar names in article bylines has helped me a ton as far as continuity and consistency go. CSS-Tricks still seems very CSS-Tricks-y to me, and that’s a big deal.
Until next time…
We hope you’ve enjoyed this little peek behind the CSScenes! We’ll do it again… and again and again. As you can tell, there’s a lot of activity happening around here, which means we’ll have lots to share in the next edition.
Oh, and if you’re one of the many who’ve told us just how much you miss the newsletter, it’s still here! We’re sending it just once a month while we get back in the swing of things, and you may very well need to re-subscribe to get it (we had to do a lot of scrubbing after the keys to the site were handed over).
