DEV Community: Diana Le

Better Accessibility: My Path to the CPACC

Diana Le — Tue, 09 Dec 2025 17:00:00 +0000

I took the Certified Professional in Accessibility Core Competencies (CPACC) exam offered by the International Association of Administrative Professionals (IAAP) in August of this year, and aside from PSATs/SATs in high school, I have never studied so much for one exam in my life. I have also never PAID as much for an exam in my life. I found people's shared online experiences helpful when I was debating taking this test, so I'm adding my thoughts as well. Overall I'm glad that I decided to take the test, but the entire process had some surprising steps and was not entirely smooth.

This is not a direct how-to guide. I may have ~~failed~~ passed, but people are different in how they learn; I'm just hoping some added context is helpful to anyone else looking to take the exam because I researched as much as I could before registering.

Why Take the Test
My Background
- Why Focus on Accessibility
- Previous Lack of Management Buy-in
A Condensed Timeline
- Deque University
- Book of Knowledge
Second Thoughts
- Going Old School
- Slow and Steady
- An Unexpected but Relevant Roadblock
Taking the Test
- The Application Process
- Scheduling
- Test Day
- The Exam
- Total Time Spent Studying
Exam Criticisms
- Wide Range of Topics and Specificity
- Not Following their Own Recommendations
Post-Exam Reflection
- Lack of Confidence
- The Wait
- Lingering Questions
- One Tool
- A Needed Boost
- Recommendations in Hindsight
- Online Resources

Why Take the Test

I got laid off earlier this year so I had plenty of time each day to study (albeit not while in the happiest mood), although after going through this process I feel it's better to spread out the information over more days because getting a good night's sleep helped me retain the knowledge.

There is also a lack of certifications for web development / front-end engineering. This certification felt at least somewhat universally known and I wanted to learn more about accessibility anyway. There are also more job postings that mention accessibility and ones that have specifically mentioned IAAP and their certifications — not a lot total but more than I've seen in the past.

My Background

I've been a front-end web developer for 12+ years. I started focusing more on accessibility 7-8 years ago after learning more about the topic from conferences and from other web developers I follow, but this effort has always been non-critical to my jobs. I’ve proactively made the effort to learn and to be accessible as I can within the budget, particularly regarding using the proper semantic tags in HTML, making sure form labels are appropriate, ensuring contrast is sufficient, and interactive states are captured by ARIA, etc. I also run through my sites using VoiceOver on MacOS. But overall the jobs I've had never required or had specific criteria to check against. I would give and receive feedback from other accessibility-minded developers at work, but this was nothing official. Accessibility was a nice-to-have and something to strive for, but the on-work training and executive buy-in for a standardized process was never there.

Why Focus on Accessibility

What kickstarted my focus the most was during a talk on accessibility, the presenter said that it's highly unlikely that designers/developers were specifically trying to make life harder for people with disabilities, but rather they lacked that extra viewpoint when navigating web sites. I try to be as empathetic as I can, and this opened my eyes to all the things that HTML natively provides that a developer can unintentionally break.

Earlier on in my career I really had to fight to keep things accessible. Project managers would ask to remove focus outlines from input fields just because they didn't like the look but I would argue to keep them because of the accessibility issues of removing them. It was one thing to not follow checklists, but proactively spending time to remove useful if visually displeasing things was mind-blowing to me.

Previous Lack of Management Buy-in

The biggest argument I had was when a client wanted to remove all keyboard focus states off their web site because my company never designed the native focus outlines provided by the browser, so the outline colors were the browser defaults. For my client these outlines didn't match the color scheme of their branding. I told my project manager that I would choose a more appropriate color and updated the CSS. The client came back and said they still wanted them removed. I told my project manager to wait, and then talked to my director. I told him what the client wanted, why this was bad — both from an accessibility perspective and from a potential lawsuit perspective — and also linked relevant articles on why focus states should never be removed. He responded with, "But the client doesn't like them," and that was the end of the conversation.

I felt incredibly dejected that day. I've had plenty of bad experiences at work, but this one particularly bothered me because it felt especially wrong to exclude people with disabilities from functionally navigating the site for the sole reason that one person didn't like it for aesthetic reasons. And I had substantial evidence for why they shouldn't be removed, but my managers seemed to only want the path of least resistance.

With an accessibility certification though, I feel like I would be empowered and have credibility to argue my positions. If this certification had existed back then, maybe I would have had more power in that exchange. The environment now is also much different than it was 5 years ago, with more accessibility laws in existence across the globe and more general awareness of its importance.

A Condensed Timeline

Deque University

I already knew of Deque University from a previous job where my coworkers were trying to complete the Web Accessibility Specialist (WAS) course outside of project work to get certified (this wound up being an untenable goal due to the nature of client work unfortunately). But since I had heard good things about the platform, I decided to purchase. The IAAP exam dates are arranged into sessions, and ideally I would have preferred an additional two weeks to prepare, but since I had no idea what my job situation would be like by the time of the next exam session, I decided to register even if the timeline felt rushed.

My goal was to finish the Deque course and finish my own separate notes on the course at least a couple days before applications closed on July 16. If I reached that critical goal I would apply and register for the exam. I received access to the Deque course on June 17. I planned to take the exam near the end of the period which was August 12. That would give me a little less than two months to prepare for the exam.

Because Deque has a progress tracker on the course depending on how far you've clicked through the lessons, I used this to set a mini-goal to achieve a certain percentage each day. The problem with this strategy is that Deque seems to base this on number of pages rather than total content. So if you're reading through lessons with one or two paragraphs per page, it will seem like you're progressing further than you actually are. Once I reached pages with 10+ paragraphs and tabbed sections, I felt demoralized at how slow I was going.

Book of Knowledge

Once I finished the Deque course, I read through the IAAP Book of Knowledge (BOK) and cross-referenced my notes from the course and filled in any missing information or better-worded concepts. That took another full week. By the end my converted PDF of notes was 160+ pages long. I was surprised how short some sections in the BOK were compared to Deque, but I suppose that's why you pay for the course.

Second Thoughts

Once I got deeper into the Deque course I wondered if I had made the right choice in taking the CPACC versus the WAS, which would have been more in line with what I've already been doing for years. I appreciated the background information and context that I was learning on why we should do things certain ways on the web. But it was so much new information and the diversity of topics made it harder for me too. Information like the disability models and types of disabilities, while mostly new information, made sense. Web accessibility and universal design were the most familiar topics but still a lot of new information.

Once I reached universal design for learning, which was so different from anything I've learned during work, I hit my first stumbling block in terms of retaining information. I would read the same sentence over and over but it would not sink in. And the terminology for the guidelines seemed bizarre. The description and the guidelines just didn't seem to tie together; I could only imagine how difficult this topic is for people who can't take this test in their native language. When I got to accessibility laws, it became too much — just so much diverse information I couldn't remember all of it after re-reading it multiple times.

Going Old School

People online mentioned using flashcards to study and once I only had two weeks until my test date, I decided to make an account on Brainscape where there were already a few sets dedicated to CPACC. At this point I knew that reading the material over and over was not going to help me. I tried a few of the CPACC flashcard sets on Brainscape but none of the answers satisfactorily matched my notes so I basically took one already built CPACC class and slowly replaced every single answer card, deleted many cards, and added my own. You probably would be better off just creating your own set of cards from scratch.

I hadn't used flashcards since high school when I had to write them out by hand, and I really enjoyed the paced repetition on Brainscape that can only happen because it's digital. For every card, you rank on a confidence scale of 1-5 how well you knew the answer. The less confident you are on a card, the more often that card will show up. But the app also doesn't just keep throwing new cards at you; you have to reach a certain confidence level before it starts slowly testing new cards you haven't studied yet.

Slow and Steady

I organized my cards into sections based on the Deque course, and I would re-read my notes on a section, then do flashcards pertaining only to that section for a day. The next day I would read a new section, then do the flashcards on the previous section until I surpassed a certain percentage, then do flashcards on the section I just read. Slowly but surely I increased my confidence levels. Some of the more comprehensive sections I would revisit over and over but still continue my reading on new sections. For instance, disabilities, universal design for learning, and laws all stayed around 40% for days while other sections quickly increased to 70-80%. I opted to do this method because I didn't want to just know the subject well enough to pass a multiple choice test, I wanted to be able to rattle off as much as I could about a specific topic as if I needed to explain it to someone.

An Unexpected but Relevant Roadblock

I made a goal to hit 80% in Brainscape by the Saturday before my test. Since level 5 is for cards that you feel you'll know "forever," it's unlikely you'll hit 100%. I then was hoping to cycle through all the cards in the final 3 days before the test. On Saturday however, my mom fell and fractured her wrist, and I had to spend the next 3 days watching her like a hawk, driving her to multiple doctors, cutting her food for her, helping her to shower, and doing other things she couldn't do by herself.

On the one hand, watching all the limitations she encountered without being able to use her dominant hand made me see directly how much daily life is impacted by disabilities. On the other hand I started to panic at this point, wondering if I should cancel my test because the scheduled studying I had planned to do the final 3 days was out the window. But the test fee was not refundable and I had already put in so much effort that I decided to proceed. I studied wherever I could. I brought my iPad to my mom's doctors' appointments so I could study in the waiting room. I studied at night after she went to bed. By the time of test day I had reached 97.6%. I almost cried with relief that final night.

Taking the Test

Although you can take the exam at home from your own computer, based on Reddit threads most people recommended taking it in-person at an exam center, with the main reason being that the online proctors could be especially strict, and if something happens where the exam becomes nullified (bad internet connection, loud noises, etc.), it's on you to argue. Whereas at Pearson in-person they're responsible for making sure the exam runs correctly and are obligated to fix problems. After taking the exam at Pearson, I can confirm that it was a nice quiet environment for concentrating.

The Application Process

The process from registering with IAAP to scheduling the test is actually much more manual than I thought it would be, and some of the steps do take time, so keep that in mind:

Register with IAAP and submit an application for the exam you want to take. According to the web site, approval can take up to 5 business days but mine was approved by the next day via email. I'm assuming this was quicker because the requirements for CPACC are lenient compared to WAS.
Once approved, submit payment for the exam online at IAAP.
Once paid, wait for the "Authorization to Test" email from Pearson VUE. You cannot schedule an exam until you are authorized. This took 5 days (including the weekend) for me to receive the email.
Create an account and schedule your exam on the Pearson VUE site.
Take the exam.
Wait 4-6 weeks after the exam close date for results.
If you passed, wait another week for your Credly badge and IAAP documents.

Scheduling

The Pearson scheduling experience was terrible if you signed up later like I did. Be aware that because there are so many different tests administered by Pearson, people may have scheduled exams months in advance, and when you take the test it’s this mixture of people in the room with you. Because I scheduled this exam later in the schedule, most days weren’t available at all until one to two weeks before at four of the test centers near my house (probably because people were rescheduling their exams), and each time you reschedule costs an additional $50. I begrudgingly paid the reschedule fee to get my ideal date and time which luckily opened up 9 days before. I recommend registering earlier to have more openings for the test.

Test Day

Check-in for the test was very smooth. I was actually planning to do an additional run through of my flashcards in the waiting room but the employee waved me in since the policy seemed to be to let people into the room on a rolling basis as other people finished. I had to turn off my phone in front of them, show my ID, scan both my palms a couple of times each, take a photograph, and then store items in my locker. At the testing station they provided me with a laminated scratchpad for notes, and noise-canceling headphones were available at each desk.

The computer had nice options for the interface. You could change the color scheme and had 10+ options at any point (which is very accessible). I tried to do white on black text but then the highlighting didn't look clear enough to me. You could use strikethrough on text on the answer options, although depending how you clicked, you could wind up accidentally selecting an answer as well. There was also an option to write feedback comments on every question, which I did on several; however be aware this does take away from your exam time. You could flag any question you wanted to return to, which was useful when using the navigation button, or at the end when you review, as it shows you a list of all questions with statuses on completion and on flagging.

The Exam

I did a first pass through the test which took 70 minutes. I flagged 15-20 questions, but I decided to also double-check and re-read every single question and this took up the rest of the two hours. I probably could have spent another 15 minutes. There were at least 5 questions that referenced things I did not encounter at all in my studying, and another 10 questions that I could have flipped a coin between two choices. Maybe I felt sure about 30 questions and "pretty sure" about 20 more. Overall I felt good... but also would not have been entirely shocked if I didn't make the cutoff. I can understand why many of the people writing about their experiences say they didn't feel particularly confident afterwards. There were a few questions that felt not exactly random, but you would have had to go DEEP into material to know the answer.

Total Time Spent Studying

The IAAP site recommends that people spend anywhere from 30-80 hours in preparation for this test. Because of the statistics from the Brainscape site, I know that I spent 29 hours on flashcard studying alone. This did not include the time I spent creating the flashcards, which probably took another 10 hours. I probably spent at least another 20-30 hours on the Deque course and on writing out my notes. So my total time was definitely on the higher end of the scale. I also consulted other sites and blogs which are listed at the end of this post.

Exam Criticisms

Wide Range of Topics and Specificity

Having read through both the BOK (but not every externally-linked reading) and having completed Deque's course, those covered ~90% of the material on the test. Maybe with luck you might get a test that matches everything exactly. Most likely if you want full knowledge, you'll need to read through all the supplemental materials on both, however the net is especially wide. It was pretty demoralizing to click on an external link that led to 20 subpages. On the exam there were references to laws or medical conditions that felt too specific and not in the spirit of what this overall certification is trying to accomplish. There was a question on the test about the global numbers of a specific disability. I happened to know the answer, but only because when I read it while studying I thought, “This is such a random specific statistic that there’s no way they’re going to ask this on the exam.” Well they did.

There were also a few questions on the exam regarding a specific law which I had never heard of. I found this surprising because I made a huge effort to memorize all the accessibility laws that I could (and for many countries outside the US). When I got home and looked it up I realized I did study that law and knew it well, however I only knew it by its official, technical name, not the friendlier "common" term for it. I don't recall in any of the questions where it had the technical name in parentheses, so my thought at the time was, "How is there another law that seems to overlap with existing laws?" I felt this was another example of the test questions relying too much on unguided direct memorization.

Not Following their Own Recommendations

The biggest irony was the format of the test itself. Universal design for learning emphasizes that using one method to demonstrate knowledge proficiency is not enough (the principle of multiple means of action and expression) because some learners may have barriers with certain methods, and others may just need to express themselves in different ways... and yet this test is offered in one format of multiple choice answers. In the Deque course, they used multiple choice tests as a specific example of a format that may cause issues for certain learners. I understand the added complexity of administering multiple formats for a global exam, but it was ironic nonetheless.

Post-Exam Reflection

Lack of Confidence

I researched people's experiences with the test online before I signed up, and a lot of people mentioned that they were uncertain on how well they did afterwards. I felt exactly the same way, which is an odd feeling about a multiple choice test. There were enough questions that I either had no idea about because I didn't know the topic at all, and other questions that felt specifically tricky between two answers. I was expecting to pass but also would not have been surprised if I barely made the cutoff.

To be clear, I felt extremely confident in my knowledge about all of the topics, but not about how I did on the test itself. I don't think I've ever taken a test where I felt that much uncertainty afterwards, which was not a great feeling. Some of this may also have been due to me knowing that IAAP uses a modified Angoff scoring method, which requires subject-matter experts to review each question. So while taking the exam I was unintentionally also thinking about whether each question seemed "easy" or "hard."

The Wait

The results can take 4-6 weeks from the end of the exam period, which lasts about a month. I took my exam the second to last day, and even then the wait felt like forever. I would watch jobs get posted wanting the CPACC certification and debated whether to wait to apply after I got the certification (if I even got it), or to apply as soon as possible. I also wanted to start studying for the WAS certification, but not if I failed the CPACC. While it felt frustrating to wait for all the reviewing, I told myself it's better than getting a strict cutoff immediately after finishing the test.

Finally, 5 weeks and 5 days after the exam period ended, I found out that I had passed with "Above Standard" in each domain, with a scaled score of 724/800. Being laid off this year and struggling in the job search has been very demoralizing every day, but the day I found out I passed, I felt a joy I hadn't felt in months. Knowledge in web development can feel nebulous, and there are points where you can feel you know a lot until you learn more and realize all of what you don’t know. But here was something that I put the effort to learn and felt validated by the results.

Lingering Questions

There are still scenarios regarding web accessibility or universal design that I still don't know which concept fits the most. For example on a web site, let's say you have a word game where a banner will display only if you lose or win the game. Following the rules of interaction, you will need to create an aria-live region for screen readers so that users will know without being able to look at the content that they won or lost. But which of the web accessibility principles (perceivable, operable, understandable, robust) does this apply to?

Deque had this type of alert listed as both perceivable (able to perceive through sight, sound, or touch) and robust (compatibility including with assistive technologies). Is it both or is one case stronger than the other? I could also argue this would be under understandable because if you kept trying to play the game even after the game is over, you are going to be confused. This was frustrating because as a developer, I know why this solution needs to be implemented, but when you're limited to a multiple choice test you have to know exactly which principle fit the best.

One Tool

I had to remind myself that while this was an accessibility certification, like every other certification out there, it's only as good as what you make of it. There are plenty of people who know accessibility without being certified, but for me I liked having some structure in which to guide my learning. And as I had mentioned earlier, I wanted some official credibility if I have to fight to keep something accessible in an environment that doesn't proactively support it.

A Needed Boost

I intend to keep accessibility as a priority in my front-end career whether or not it’s a specific requirement of my job, and being a CPACC is just one part of it. While I had qualms with some of the questions on the CPACC exam, and there are certain details I won’t need in my career, I’m still glad that I learned this information and now understand the larger context that accessibility plays in this world. And I'm glad this certification exists to motivate people like myself to learn more. I plan to keep learning accessibility from online courses and conferences, and also plan on taking the WAS exam so I can become in combination with CPACC a Certified Professional in Web Accessibility (CPWA).

Recommendations in Hindsight

Online sites that have example multiple choice tests are useful, but I would make sure that you can answer the questions open-ended just because of how varied and encompassing the subject is. I did maybe 5 runs of multiple choice tests but spent the bulk of my time with flashcards
Deque University only allows one active subscription at a time. If you are considering taking both the CPACC and WAS, then I would pay for the combined course. I only signed up for the CPACC course and had to contact customer service in order to switch over to the WAS course and wound up paying more than if I had just signed up for the combined CPACC/WAS to begin with.
If you are reading and re-reading the same content and it is not sinking in for you, consider watching some YouTube videos for a different way for the information to be presented. After being stuck on universal design for learning for days, I listened to a portion of a YouTube video and this cemented the basics for me immediately — all because the information was presented in an auditory manner.
Apply and register for the test early so that you will have more options for scheduling in-person at Pearson.

Online Resources

Deque University: https://dequeuniversity.com/online-courses/
IAAP Book of Knowledge (Oct 2023): https://www.accessibilityassociation.org/sfsites/c/resource/CPACCBoK
CPACC preparation and blog: https://chelsea11y.com/cpacc/index.html
Practice multiple choice tests: https://a11yconsultant.com/
Brainscape Flashcards: https://www.brainscape.com/
CPACC subject overview video: https://youtu.be/a01vcZMTJqU?si=HA4B6_Xo2KSqk4mK

Use the new ARIA landmark for search forms and filters

Diana Le — Tue, 29 Apr 2025 16:44:54 +0000

ARIA landmark roles are sections of a web site that are so important to the page that they warrant their own dynamically generated navigation in assistive technologies. There are eight total landmarks, but there were previously only seven semantic HTML tags to correspond to those landmarks. Now finally the missing semantic tag <search> is available in browsers and is compatible under Baseline 2023 Newly Available.

How to use

Wrap the <search> tag around your search form (and any relevant filters or quick search results). The full search results should not be within the <search> but rather within the main body of the page.

<search>
  <form>
    <label for="search-input">Search</label>
    <input type="text" id="search-input" name="search-input" />
  </form>
</search>
<!-- Search Results Below -->

Older method using the attribute `role="search"`

Before the <search> element, you could use the "search" role on a form to designate it as a landmark:

<form role="search">
  <label for="search-input">Search</label>
  <input type="text" id="search-input" name="search-input" />
</form>

I'll admit I wasn't aware I was missing role="search" at first until I had built many search forms, but using that or the newer <search> element is a very easy change to implement.

ARIA landmarks and corresponding HTML tags

Here's the complete list of landmarks and their respective tags/elements. Be sure if you use the <section> tag that you use an ARIA label with it, such as tying it to the ID of the highest heading within.

ARIA landmark	Corresponding HTML
Main	`<main>`
Banner	`<header>`
Navigation	`<nav>`
Contentinfo	`<footer>`
Complementary	`<aside>`
Region	`<section aria-labelledby="">` or `<section aria-label="">`
Form	`<form aria-label="">`
Search	`<search>`

For more information

CSS Layouts: Get Started with Container Queries

Diana Le — Wed, 25 Oct 2023 15:00:00 +0000

Welcome to another year of the State of CSS. Like for last year's State of CSS 2022, I will be creating a series of examples and tutorials mentioned in the survey so we can all learn and keep up with the latest features.

Container Queries

Let's kick off this series with an introduction to container queries - a new alternative to media queries. I heard about container queries a few years ago, and went through some articles and video tutorials, but for some reason with the examples I reviewed, I just couldn't get it. Everyone was saying how this would dramatically change CSS, but it was hard for me to grasp by how much. After finally understanding the basics I realized that container queries are super-powered media queries. (But be aware they do not replace all media queries).

When Media Queries Become Inefficient
Enter the Container
How to Set Up Container Queries
- Determine the container
- Set the CSS Container Rules
When to Keep Using Media Queries

When Media Queries Become Inefficient

This year I've been working more with components, and when I was working on a project with a permanent sidebar and needed to style the content within the remaining layout portion, I realized this would finally be the opportunity to use container queries. A media query would not work well unless I always factored in the size of the sidebar, which was not going to be efficient.

Why doesn't this work well with media queries? Imagine that you want to display cards, and for screens 1200 pixels and above, you would like to display a single row of 3 cards:



@media (min-width: 1200px) {
  .cards-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

For a layout that is full-width, this works fine with media queries because the width of the browser is the same as the width of the container:

What if the layout has a left sidebar? The browser width is still 1200 pixels but the actual container that the cards are displayed in is now only about 800 pixels. But based on the same media query, the cards would still display a single row of 3 cards:

If you wanted to change the number of cards per row to 2 instead of 3 on this specific layout, you'd have to either add a class to this specific instance of cards or use a compound selector:



@media (min-width: 1200px) {
  .two-column-right .cards-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

This will work but makes the code not as clean because you have to consider all locations where these specific cards are used and adjust all places if the styling changes.

Enter the Container

What if we could style our cards based on the parent container so that regardless of what the layout is, the cards would be styled correctly? That is the power of container queries. We could style those same cards for the exact dimensions of the container, and then afterwards we wouldn't have to worry about where the card component is used because we've already accounted for the styling. We basically have a component with built-in styles that can slot anywhere.

Whether it's dropped into a full-width layout or into a sidebar, once we have the CSS rules in place, we don't have to worry about creating custom rules for a specific layout. We can cover all the scenarios in the same set of rules; the styles are tied to that container component.

Here's an example of the same card component being used 3 different times on a page:

Notice that the cards are styled differently between: the section "Container Queries", the "Sidebar", and at the bottom of the page.

You get the best of both worlds with container queries. If your container is always the same width as the browser, then it still works. Container queries still give you the benefits of media queries but with even more functionality.

How to Set up Container Queries

Let's walk through the previous example screenshot taken from the following Codepen:

1. Determine the container

This can be confusing at first. You need to set the container on the parent of the element that you later want to style with container queries. For example, the structure of the cards is:



<!-- Card wrapper -->
<div class="card-wrapper">
  <!-- Individual cards -->
  <article class="card">
    ...
  </article>
  <article class="card">
    ...
  </article>
</div>

The card-wrapper class is where the grid columns are set:



.card-wrapper {
  display: grid;
}

You might assume that since this .card-wrapper is the container for the individual cards, that you would set the container property here, but that would be incorrect. You need to create another wrapper as the parent, in this example .card-wrapper-container, because we want to style .card-wrapper (and how many cards to display per row) based on the width of .card-wrapper-container:



<!-- New wrapper -->
<div class="card-wrapper-container">
  <div class="card-wrapper">
    <article class="card">
      ...
    </article>
  </div>
</div>

2. Set the CSS Container Rules

Now that we know what our container is, we need to:

Create the container by setting the container-type (use inline-size as the value for now since this probably covers most of the use cases)
Define the container and create styling rules based on the width of the container. This logic is incredibly similar to media queries:



/* Create the container / set the containment context */
.card-wrapper-container {
  container-type: inline-size;
}

/* Define the container query using @container */
/* The rule below says: find the closest ancestor with a
 containment context 
- in this case "card-wrapper-container" -
and when the width is 560 pixels and above, 
set the grid columns to 2 */
@container (min-width: 560px) {
  .card-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

Those are the minimum CSS rules you need for setting up container queries. You can style anything within the container such as setting font sizes:



/* Change the grid columns to 3 per row
once the width of the container is 768px
and adjust the font size of the card title */
@container (min-width: 768px) {
  .card-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }

  .card__title {
    font-size: 1.5rem;
  }
}

And voilà, you have set up container queries and changed the grid columns and font sizes within. You can keep adding more breakpoints and then place the .card-wrapper-container HTML anywhere onto a page (and in multiple locations), and it will always style based on the width of the container. 🥳

When to Keep Using Media Queries

Media queries are still useful for setting the overall layout of the page, and needed for accessibility or browser preferences like prefers-reduced-motion or prefers-color-scheme. If you need to support older browsers, then media queries are also more browser-compatible. But container queries can be a powerful, more efficient replacement for media queries when you want to break down your site into reusable components. Hopefully this article gives you some ideas that you can use as you get started with this new feature.

Are you an HTML expert? Find out with the new State of HTML 2023 survey

Diana Le — Thu, 28 Sep 2023 20:00:55 +0000

If you're familiar with the State of JavaScript or State of CSS surveys, there is now a brand new State of HTML survey that is still open.

How did you do? Is HTML already one of the languages you continuously keep up with?

This was definitely an (expected) humbling experience for me after 10 years of web development:

I feel like HTML can get glossed over in web development since it's not a programming language and therefore assumed you can just learn the tags at the beginning and never worry about it again. So many online courses have you "learn HTML in one day." Granted, you can definitely get started after a day but there is so much to continuously learn; I still sometimes struggle with selecting the proper tag to represent specific content for semantics and for accessibility. (Don't even get me started on form tags).

And based on this survey, there are so many new tags and APIs that continue to come out. There were so many things I hadn't even heard of. A lot may not be applicable to what you do day-to-day, but it's definitely a reminder to research things even if you think you already know.

CSS Layouts: Maintain Element Proportions with aspect-ratio

Diana Le — Tue, 01 Aug 2023 16:00:00 +0000

Introduction
Banner Example
iframe Example
Images

Introduction

There are times you'll want to keep an object on a web page the same proportion on all devices and screens, and this is possible now with aspect-ratio. This property is useful for elements that do not have inherit proportions, such as <div> and <iframe>.

I've mostly used aspect-ratio for decorative or elements with minimal text. Be careful about using it for items with long passages of text, because you have to consider what happens when text overflows. And of course if you're trying to fit it within a layout to align with other components, then you're better off using properties like grid or flex.

Banner Example

Here's a simple banner example:

<!-- HTML -->
<div class="banner">
  <h1>Welcome to the Movies</h1>
  <div class="square-one"></div>
  <div class="square-two"></div>
</div>

The banner uses aspect-ratio to keep it the same proportion (21:9) on every screen size. The aspect-ratio uses width / height as values (height default value is 1 if not declared). The banner has two decorative elements that also utilize aspect-ratio to keep the shapes and sizings consistent. These items don't necessarily have to keep the same proportions (they may change for artistic reasons depending on the viewport), but it's easy to do so now with aspect-ratio and not need to set explicit heights per viewport.

/* CSS */
.banner {
  position: relative;
  max-width: 1000px;
  width: 100%;
  margin: 1em auto;
  aspect-ratio: 21 / 9; /* Setting aspect-ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00171f;
  overflow: hidden;
}

.square-one {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30%;
  aspect-ratio: 5 / 4; /* Setting aspect-ratio */
  background-color: #007ea7;
}

.square-two {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  aspect-ratio: 7; /* Setting aspect-ratio */
  background-color: #003459;
}

The two "squares" are decorative background shapes that keep both a consistent percentage width of the banner, and a consistent proportion. Resize the Codepen window and you can see that the banner and the decorative elements inside maintain the same proportions on all screens.

You can see how simple it is to just set the aspect-ratio value once and not have to worry about it. In the past I've had to use multiple media queries for banners with background images because there is no inherent size with them, and relying on changing the vertical padding or font sizes to keep the same ratio was tedious and never an exact match.

iframe Example

For an <iframe> such as an embedded YouTube video, making it responsive while keeping the original proportion is much easier than it used to be.

Clicking on the YouTube "share" button will give you a code snippet like so:

<!-- HTML -->
  <iframe 
    width="560" 
    height="315" 
    src=...>
  </iframe>

We can use the width and height properties as the aspect-ratio and this will allow the video to be responsive keeping its original proportion:

/* CSS */
iframe {
  aspect-ratio: 560 / 315; /* width and height of video */
  max-width: 100%;
  height: auto;
}

And that's it! Previously you had to position: absolute the <iframe> in a container, and set its padding-bottom: 56.25% which is the video height divided by the width (315 / 560). I used to just copy this block over and over without thinking exactly what it was doing just because I knew it would work:

/* Old CSS method */
.container {
  position: relative;
  padding-bottom: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This code will still work, and might still be needed if you're using a non-evergreen browser, but otherwise aspect-ratio is highly supported now.

If you only style the <iframe> without setting aspect-ratio, or without using the old container method, and you only set the width or max-width property on the <iframe>, you'll wind up with a more square-ish shape as the screen gets smaller because the height will not adjust automatically. The video will still play in the correct aspect-ratio, but you will get really thick letter-boxing on the top and bottom which will make it not look like a video while paused.

Images

For images, the proportion is inherently built in with the width and height attributes (which you should always specify), so you don't need aspect-ratio.

<img 
  src="./image.jpg" 
  alt="" 
  width="300" 
  height="200">

The width and height are treated like an aspect-ratio that will keep the image the same proportion of 300 pixels wide by 200 pixels tall no matter how big or small the image gets. This also helps the browser determine how much space is needed before the image fully loads so you reduce any jarring content shifting AKA "cumulative layout shift" that affects site speed. So you probably won't need aspect-ratio for images, however it can be used in combination with width and height that you can read about here.

CSS Typography: Create exact heights with line-clamp

Diana Le — Wed, 26 Apr 2023 16:00:00 +0000

I've built dozens of web sites, and by far one of the most common components that required multiple edits was the card component. The design was always fine due to standardized placeholder content, but when the actual content came in, the cards would wind up looking like this:

If you were a developer during the era of CSS float layouts, this was incredibly annoying to deal with. Cards would stack under shorter cards instead of filling out the row. Thankfully with flex/grid, we don't have that problem anymore, but even now within the card itself, you can still get these alignment issues if you don't prepare for this beforehand. It's a good idea to be proactive and to account for these types of scenarios in order to build more resilient sites.

Make the Cards "Even"

Make sure you confirm with someone on your project on what this means. Generally I'm not a fan of hiding content just to make something prettier; if the content was intentional, then value is lost by hiding it or cutting it off. The first solution would be to review and see whether the content can be standardized so we don't have such huge differences. Once you have that answer, then proceed with either of the following options:

Use Line-Clamp to Hide Text
Use Flex-Grow to Stretch Cards

Demo Showing both Line-Clamp and Flex-Grow

Use Line-Clamp for Exact Heights

Let's say the stakeholder is fine with only showing the first X lines in the card description. This is where line-clamp makes things incredibly easy. Here is the HTML structure of the card:

<article>
  <h3>Title of Card</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit dis egestas, sem neque integer potenti venenatis vulputate varius donec. Volutpat mus eget suspendisse sollicitudin urna blandit in bibendum dui, class porta rutrum dictum facilisi facilisis mollis natoque elementum, sapien sed quisque adipiscing fames cras est augue. Luctus class rhoncus consequat etiam inceptos volutpat himenaeos quisque aptent per, parturient habitant faucibus aliquet hac torquent tempus cursus senectus, elementum vulputate magna taciti hendrerit erat sodales dapibus blandit.</p>
  <a href="#">Learn More</a>
  <img src="https://picsum.photos/300/100" alt="">
</article>

The <p> tag is what we need to "clamp" to make it consistent across all cards. This is how to cut off the text after 3 lines:

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Adjust the number of lines here */
  overflow: hidden;
}

But this is using webkit properties. Is it compatible across all browsers?

Yep, it is compatible enough (sorry, Internet Explorer). Even Tailwind has implemented it by default now.

You MUST use the webkit properties to get this working. Ellipses will always show by default on the last line if the content is longer than the -webkit-line-clamp value. If you don't use overflow: hidden, the ellipses still display, but the content still shows underneath. So at minimum, you will need all 4 rules.

This used to be much more difficult with CSS, and sometimes you'd have to resort to JavaScript. But now we have fully working CSS, if a little weird that it still relies on browser prefixes.

Make the Cards Equal by using Flex-Grow

Let's say the stakeholder wants all the content in the card to be visible. This means we'll have to adjust the height of the entire card. This is what I would normally do to account for possible varying content. It's easy to forget to do, especially if you're looking at a design where all the text is the same length. Even as I'm writing this post, I realize that the heading <h3> is something you'd want to apply the same changes to as well.

Here's our card HTML again:

<article>
  <h3>Title of Card</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit dis egestas, sem neque integer potenti venenatis vulputate varius donec. Volutpat mus eget suspendisse sollicitudin urna blandit in bibendum dui, class porta rutrum dictum facilisi facilisis mollis natoque elementum, sapien sed quisque adipiscing fames cras est augue. Luctus class rhoncus consequat etiam inceptos volutpat himenaeos quisque aptent per, parturient habitant faucibus aliquet hac torquent tempus cursus senectus, elementum vulputate magna taciti hendrerit erat sodales dapibus blandit.</p>
  <a href="#">Learn More</a>
  <img src="https://picsum.photos/300/100" alt="">
</article>

We need to use Flex on the card (which is already put to use by ordering the image at the top of the card). Then we need to tell the <p> tag to grow if needed:

article {
  display: flex;
  flex-direction: column;
}

p {
  flex: 1 1 auto;
  /* could also use flex-grow: 1 */
}

Because the paragraph is now growing, all the "Learn More" buttons will be aligned with each other at the bottom across the entire row. However, if you have multiple rows, while the "Learn More" will always be aligned, the height of the cards between rows will not necessarily match because the height of the <p> tag can vary.

Flex is one-dimensional, meaning it will only care about one row or one direction at a time. In this instance, all the cards in the same row (which will change depending on screen size) will be the same height, but flex will not enforce the same height across every row in this section.

Conclusion

Line-clamp is a very simple solution to the common problem of uneven heights of content when building web sites. Just make sure that it's not automatically your first solution since it hides content, and know what the other options are as well.

Simplify CSS selectors with :is() and :where()

Diana Le — Thu, 19 Jan 2023 18:00:00 +0000

Introduction
How Both :is() and :where() Work
- How These Help Minimize Errors
Specificity: How :is() and :where() Differ
- :where() has Zero Specificity
- :is() Applies the Specificity of the Highest Selector

Introduction

The new pseudo-classes :is() and :where() help make compound selectors more efficient and less error-prone by allowing you to group and condense selectors, which makes them easier to maintain, but each has its own quirks with how it calculates specificity.

Keep in mind that while compound selectors in CSS are essential when learning about CSS and how the cascade works, in practice they are somewhat controversial. Sometime during the almost 10 years that I've been a web developer, they became frowned upon because they were difficult to maintain on large projects with multiple developers. Methodologies like BEM became popular in part because they avoided compound selectors entirely (and therefore removed the need to figure out CSS specificity on the fly). These pseudo-classes are still important to learn, however, since compound selectors are vital to CSS, and may also potentially be incorporated in other future CSS functionality, like nesting.

Let's walk through examples of how both of these pseudo-classes work. If you would like to test the CSS as you read, here is the HTML:

<header>
  <h1>About Us</h1>
  <h2>Meet our Team</h2>
  <ul>
    <li>Unordered List item one</li>
  </ul>
  <ol>
    <li>Ordered List item one</li>
  </ol>
</header>
<main>
  <article>
    <h3>Web Designer</h3>
    <p>This is our web designer.</p>
    <a href="#">View Bio</a>
  </article>
  <article class="card">
    <h3 id="heading">Web Developer</h3>
    <p>This is our web developer.</p>
    <a href="#">View Bio</a>
  </article>
</main>
<footer>
  <ul>
    <li>Unordered List item one</li>
  </ul>
  <ol>
    <li>Ordered List item one</li>
  </ol>
</footer>

How Both :is() and :where() Work

With both :is() and :where(), you can group any selectors within the parentheses where you want to have the same declarations applied.

For instance:

h3,
p,
a {
   color: blue;
}

Becomes:

:where(h3, p, a) {
   color: blue;
}

The pseudo-classes become more powerful once you combine more complex selectors. For example, you can condense the following compound selectors:

Before:

.card h3,
.card p,
.card a {
   color: blue;
}

After:

.card :is(h3, p, a) {
   color: blue;
}

You can even chain them:

Before:

header ul,
header ol,
footer ul,
footer ol {
  color: green;
}

After:

:where(header, footer) :where(ul, ol) {
  color: green;
}

How These Help Minimize Errors

CSS is a declarative language; if the browser runs across a line that it doesn't understand, it skips it and keeps going. If we have the following CSS rule:

.card h3,
.card p {
   color: blurple;
   font-family: sans-serif;
}

The color blurple doesn't exist, and that declaration would be skipped, but then the font-family: sans-serif would still apply.

However if you had the following CSS:

.card h3,
.card p,
.card :second-child {
   color: blue;
   font-family: sans-serif;
}

There is no such thing as a second-child selector, and this ENTIRE rule would fail silently, meaning neither color nor font-family will apply to any selectors even though both declarations are valid. The .card :second-child selector ruins the entire rule.

Forgiving Selectors

Here's where the other benefit to using these new pseudo-classes comes in. Each pseudo-class accepts a "forgiving selector list", which means each

"parses each selector in the list individually, simply ignoring ones that fail to parse, so the remaining selectors can still be used." - CSS Working Group

If you had instead written the previous code with either :is() or :where(), you would have a better outcome:

.card :where(h3, p, :second-child) {
   color: blue;
   font-family: sans-serif;
}

Only the last selector :second-child fails due to the "forgiving selector list", so both .card h3 and .card p still get the CSS declarations of color and font-family applied.

Specificity: How :is() and :where() Differ

The major difference between :is() and :where() is how they handle specificity in regards to the selectors within the parentheses. Specificity determines which rules will get applied to selectors.

:where() has 0 Specificity

Any selectors using :where() will have 0 specificity. Put very simplistically, HTML tags have a specificity of 1, classes are 10, and IDs are 100. The calculations actually use 3 columns but this is just so you understand that almost all selectors have a specificity greater than 0. Generally you won't need to calculate exact specificity when writing CSS, but you can see that this means that anything inside :where(), will not apply if that specific selector has already been styled somewhere else beforehand.

/* specificity 0-0-1 */
article {
  color: blue;
}

/* This rule will not apply 
because it has lower specificity (0) 
than the rule above */
:where(article) {
  color: red;
}

This makes :where() a good choice for CSS resets or any base styling that may need to be easily overridden later.

:is() Applies the Specificity of the Highest Selector

The pseudo-class :is() will take the highest specificity of whatever is in your selector list, and then apply that to all the selectors. This means for example that if you group a tag selector with an ID selector, the tag now has the same calculated specificity as the ID. You will not be able to override the styling for the tag afterwards unless you increase the specificity to be at least the same for a CSS ID.

article :is(p, a, #heading) {
  color: blue;
}

/* This rule will not apply
because the ID selector in the previous rule
gives the anchor tag a higher specificity than here */
article a {
  color: red;
}

/* Let's force the override with the dreaded IMPORTANT  */
article a {
  color: red !important;
}

The specificity of is() makes it hard for me to think of a proper use case for it. If you are not careful with your selectors, such as mixing tags, classes, and IDs together, you will spend more time debugging why certain styles are not applying. If you make sure to only group similar selectors together (all having the same specificity), then this may be useful to use in lieu of the traditional compound selector syntax.

CSS Selectors: Style lists with the ::marker pseudo-element

Diana Le — Thu, 29 Dec 2022 18:39:27 +0000

For HTML lists, there was no straightforward way to style the bullets a different color from the list text until a couple of years ago. If you wanted to change just the marker color, you'd have to generate your own with pseudo-elements. Now with widespread browser support of the ::marker pseudo-element, this can be targeted directly.

Let's look at the different methods for styling lists, from methods before ::marker was available and how to style with ::marker going forward. Here's a simple grocery list that we will style:

<ul>
  <li class="list__apples">Apples</li>
  <li class="list__bananas">Bananas</li>
  <li class="list__avocados">Avocados</li>
  <li class="list__cheese">Cheese</li>
  <li class="list__bread">Bread</li>
</ul>

Before ::marker

Changing the bullet color using ::before or ::after

In order to change the color of list bullets, we need to generate new bullets using pseudo-elements:

li {
  display: flex;
  align-items: center;
  gap: 0 0.25rem;
}
li::before {
  content: "\2022";
  color: #ec368d;
}

Here we are creating a bullet icon by using the CSS code/unicode "\2022" - which is the code for a filled-in circle. We can set the color and then since the list-item is using flex, we can vertically center the bullet with the text. Before flex was supported, I used position: absolute, which was horrible to style and to keep responsive with the font-size. So with flex being available now, this already makes the old method not as cumbersome as it used to be. The new marker will take into account any left-padding on the list.

I used to include the following rule to remove the default list styling first. This is accomplished by the following line (if you have any CSS resets in use, this may already be included):

ul {
  list-style: none;
}

This rule however is actually not needed because with the pseudo-elements, those replace the default style regardless. You may or may not want to add this for standardization purposes.

Changing the marker to an image

What about changing the marker to an image instead? This is actually pretty simple. Here I'm setting the marker to the CSS code/unicode for a shopping cart emoji.

li {
  list-style: "\1F6D2";
}

Using ::marker

Changing the color of the list marker

Now that we have access to ::marker, things are much easier. If we want to just change the color of the bullets, then it's just one line:

li::marker {
  color: #ec368d;
}

For changing the bullets to an emoji, we can also use ::marker. This is the same amount of code as the old method, so it's your preference on which to use:

Changing the marker to an emoji

li::marker {
  content: "🍎";
}

Let's have fun and have each emoji match its list item:

.list__apples::marker {
  content: "🍎";
}
.list__bananas::marker {
  content: "🍌";
}
.list__avocados::marker {
  content: "🥑";
}
.list__cheese::marker {
  content: "🧀";
}
.list__bread::marker {
  content: "🥖";
}

You can also use the CSS code/unicode value for content instead of the actual emoji in case emojis cause issues within your editor or compiler:

li::marker {
  content: "\1F34E";
}

Conclusion

And that's it for styling list markers! Short and simple and one of the really nice things to have compared to the old methods.

CSS Selectors: Introduction to :has()

Diana Le — Fri, 09 Dec 2022 13:00:00 +0000

The functionality of CSS's new :has() selector has been something that I've wished existed natively ever since I first started learning web development. With :has(), you are able to style a parent element based on its children, or a previous sibling element based on its subsequent siblings. Before :has(), you could style an element in CSS if it followed another element, but in order to style a preceding element, you'd have to either flip the order of elements in the HTML, or resort to JavaScript. Now we can use pure CSS to style any element based on its relative selectors.

Note: At the time of this writing, this feature is supported in Chrome, Edge, and Safari. Firefox requires enabling the layout.css.has-selector.enabled flag, which I found still didn't give the full functionality.

Let's learn this selector with two simple examples, one utilizing siblings and the other utilizing parents.

Required Form Fields with Matching Labels
Navigation Menu with Parent Dropdowns

Required Form Fields with Matching Labels

I've built and edited a lot of HTML forms, and when form fields were updated very frequently, one of the easiest mistakes to make was forgetting to indicate via the form label that the input was required (or was now optional after previously being required). The visual corrections were always easy to adjust (adding/removing an asterisk or "required" text to the label), but it would have been nice if there were a way to automatically sync the two together to reduce developer error. With :has(), now there is.

This is a standard form with a <div> containing each label and input. The label and input are sibling elements. The name and email fields are both required. For a required input, before :has(), I would write the HTML like so:

<div class="contact__field">
  <label for="name">Name <span>*</span></label>
  <input type="text" id="name" required>
</div>

Since the "name" input is required, I would add a <span> tag containing an asterisk to the label to visually indicate to the user that this is a required field. This is where developer error occurs if this field is later switched to optional with the removal of the required attribute from the <input>, but where the label is not updated to match.

Using :has() to dynamically update required labels

With :has(), now we can target labels that specifically have any sibling with the "required" attribute. Just put the regular CSS selectors you want within the parentheses. In this example, I am using the adjacent sibling selector:

label:has(+ :required)::after {
  content: ' *';
  color: #f68ea6;
}

This selector says, "Find all labels that have an immediate sibling with the 'required' attribute, and create the 'after' pseudo-element."

This means my HTML can now be updated. I no longer need to manually mark up the label with any additional HTML or classes because the CSS will now generate the asterisk for the label automatically depending on the existence of the "required" attribute of the <input> tag:

<div class="contact__field">
  <label for="name">Name</label>
  <input type="text" id="name" required>
</div>

And that's it! If you follow the same HTML structure, you can add additional form fields and the label will adjust dynamically based on a required or optional input.

Navigation Menu with Parent Dropdowns

Let's say you have a primary navigation, and some of the landing pages have children pages, and these pages will be displayed once the user hovers over the parent link. You'd probably want an indicator to let the user know that there will be subpages, and we can do that with :has(). Here I am adding an arrow pseudo-element to links with child pages (in this example, the "About Us" link):

If you were using a CMS or components to build your site, you could use logic to mark parent pages with a specific class and then style from there, but I'm purposely avoiding using CSS classes so you can see how this can be done without additional markup.

For this menu I am using unordered lists, and for nested lists, the HTML syntax is:

<li><a href="#">About Us</a>
  <ul>
   <li><a href="#">Culture</a></li>
   <li><a href="#">History</a></li>
   <li><a href="#">Team</a></li>
  </ul>
</li>

Using :has() to dynamically indicate parent pages

All links use an <li> tag, and all parent pages will have a nested <ul> tag containing the child links. This means we can specifically style all (and only) parent pages by targeting <li> tags that have a <ul> as a direct child using :has(). Again, place the selector within the parentheses; here I'm using the child combinator:

.links > li:has(> ul)::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: calc(50% - 10px);
  border-top: 10px solid #044b7f;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transition: border 0.4s;
}

This selector says, "In the navigation list, find all <li> tags that have a direct <ul> child, and create the 'after' pseudo-element." All other <li> tags without this child element (non-parents) will not be affected. There is additional styling related to the hover and displaying of the submenu on hover, but the main selector that will continue to be used is the .links > li:has(> ul).

And that's all that's needed! In the HTML, if you were to create additional parent links in the navigation with child links, these would automatically get the same parent styling with the pseudo-element arrow without needing any additional markup or CSS classes.

Conclusion

These are just a couple of simple examples where :has() can make CSS more dynamic and convenient. There are ways to chain the selectors for much more complex uses, but hopefully this is enough to get you started with this powerful new functionality.

State of CSS 2022 Survey

Diana Le — Wed, 07 Dec 2022 19:21:31 +0000

I always get a little excited each time the annual State of CSS survey rolls around because I can feel validated in what I know, and I can also discover new things I haven't heard about so I can learn them in the future. I took the 2022 survey almost immediately when it was released this year and my personal results made me feel demoralized:

I'd been scoring 70+% each time I'd taken previous surveys so I was surprised how low I scored this time. But there are a couple things going on here. First is the rapid speed in which new CSS features are rolling out to browsers now, which is a great thing. We won't have to wait for a "CSS4" spec; individual features are able to be implemented in browsers.

The second factor is how web development requires constant learning. Hopefully you are able to keep up with at least some of the new features in your job, but I've worked in roles where this wasn't prioritized and it required personal time to keep up. It can also feel overwhelming even if you do have time to learn at work just on account of how many new features there are and where to start, and whether those new features have practical uses for what you're working on.

In the past few months I've been more proactive about my career and focusing more on CSS, so I'll be making a series specifically on features from this survey so I can learn and hopefully help you to learn as well. These will not be in any particular order, and there may be multiple articles about the same feature depending on the functionality. Overall I'm pretty excited to explore all these new CSS features. Let's do this!

When did you create a Stack Overflow account?

Diana Le — Tue, 21 Jun 2022 17:14:59 +0000

It took me 9+ years to join Stack Overflow

I've been using Stack Overflow as a resource for web development for 9+ years now, but it wasn't until this week that I actually created an account and started answering questions and commenting and it's been incredibly rewarding.

Why did it take so long?

Maybe because it's always been such a major source of developer information, but I always found the site intimidating because every now and then I would see a question that I thought was legitimate get downvoted, or I was put off by some long critical arguments over which answer was "right." Most developers on my team didn't have accounts either because they felt similarly.

I can't even fully explain where this paranoia came. The thought was something like what if you answered a question that wound up being severely downvoted by the entire community, and then you find out you're not a "real developer." The other thought was any question that I can answer, another developer has probably already answered, so what's the point? I finally realized those were unhealthy insecurities that I was placing on myself. The whole point of the site relies on an active community.

Providing my first answer

I found out that you can't upvote an answer until you have at least 15 points so it was necessary to find a question I could solve. The responsiveness of the community is lightning fast too. I think my first answer for a question that was posted 1 minute earlier already had another answer by the time I finished typing my reply. But my answer got upvoted immediately and I saw the little points notification in the top right. Then I answered another question and got upvoted and then I got the power to add comments. Other answers never got responses, or my answer wasn't what the user needed. But hey, I tried. Turns out getting started was not as scary as I thought it would be.

Finally being part of the community

Now I feel guilty for never upvoting and showing gratitude for all those answers that have been vital to solving problems I've encountered over the years, but better late than never. I'm making it a goal to casually answer questions when I can because at the end we're all trying to learn and help each other, and if something I answer winds up not being right, then I'll learn the better way to do it. And I can finally ask questions when I'm stuck instead of combing through dozens of posts trying to find my exact problem.

There are times as a developer when I've felt like I've just had to stick my head down and code and figure out any problems on my own, even though I was always happy to help out a coworker who got stuck on a coding issue. That's how I view being active on Stack Overflow. You're helping someone out and growing your own troubleshooting skills, just on a much wider scale.

Don't doubt yourself

If you've restrained from joining Stack Overflow for the same reasons, then I encourage you to join the community if you feel it would be beneficial. I'm not interested in the clever gamification system they have with badges and points, but it does feel rewarding to contribute back to the community that has helped me out a lot throughout my developer career.

Best Internet Explorer Troubleshooting Memories

Diana Le — Wed, 15 Jun 2022 03:47:16 +0000

In honor of IE retiring tomorrow June 15, let's talk about our best (or worst depending on your point of view) troubleshooting experiences with Internet Explorer.

One of my first tasks at my first web development job was to make sure another developer's site was working in IE 7, 8, and 9. We had an old Windows XP desktop in a corner of the dev room specifically to test IE versions and I probably spent 20 hours fixing issues on that site, hacking through floats and z-indexes and fixing random JavaScript issues (or leaving them alone if the site still seemed to be working). I had always heard about IE being bad but didn't really get it, but after that task... I finally understood.

I haven't worked in IE for a while now and much like how we used to use CSS floats for layouts, I'd almost forgotten how much more tedious troubleshooting CSS used to be.

As an aside I will say that despite all the dunking we like to do on IE, they had smart people working on the browser and the origin of CSS grid came from the IE team so it wasn't all bad in the later years.

DEV Community: Diana Le

Better Accessibility: My Path to the CPACC

Why Take the Test

My Background

Why Focus on Accessibility

Previous Lack of Management Buy-in

A Condensed Timeline

Deque University

Book of Knowledge

Second Thoughts

Going Old School

Slow and Steady

An Unexpected but Relevant Roadblock

Taking the Test

The Application Process

Scheduling

Test Day

The Exam

Total Time Spent Studying

Exam Criticisms

Wide Range of Topics and Specificity

Not Following their Own Recommendations

Post-Exam Reflection

Lack of Confidence

The Wait

Lingering Questions

One Tool

A Needed Boost

Recommendations in Hindsight

Online Resources

Use the new ARIA landmark for search forms and filters

How to use

Older method using the attribute role="search"

ARIA landmarks and corresponding HTML tags

For more information

CSS Layouts: Get Started with Container Queries

Container Queries

When Media Queries Become Inefficient

Enter the Container

How to Set up Container Queries

1. Determine the container

2. Set the CSS Container Rules

When to Keep Using Media Queries

Are you an HTML expert? Find out with the new State of HTML 2023 survey

CSS Layouts: Maintain Element Proportions with aspect-ratio

Introduction

Banner Example

iframe Example

Images

CSS Typography: Create exact heights with line-clamp

Make the Cards "Even"

Demo Showing both Line-Clamp and Flex-Grow

Use Line-Clamp for Exact Heights

Make the Cards Equal by using Flex-Grow

Conclusion

Simplify CSS selectors with :is() and :where()

Introduction

How Both :is() and :where() Work

How These Help Minimize Errors

Forgiving Selectors

Specificity: How :is() and :where() Differ

:where() has 0 Specificity

:is() Applies the Specificity of the Highest Selector

CSS Selectors: Style lists with the ::marker pseudo-element

Before ::marker

Changing the bullet color using ::before or ::after

Changing the marker to an image

Using ::marker

Changing the color of the list marker

Changing the marker to an emoji

Conclusion

CSS Selectors: Introduction to :has()

Required Form Fields with Matching Labels

Using :has() to dynamically update required labels

Navigation Menu with Parent Dropdowns

Using :has() to dynamically indicate parent pages

Conclusion

State of CSS 2022 Survey

When did you create a Stack Overflow account?

It took me 9+ years to join Stack Overflow

Older method using the attribute `role="search"`