CSS

How to Create Netflix Clone with React.js, Tailwind CSS and Styled Components

Published Sep 29, 2021

Updated Feb 14, 2023

10 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Hello folks. Welcome to this tutorial. We will build a Netflix UI clone with React.js, Tailwind CSS, and Styled Components that looks like this:

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Rather than focusing on the functionality of the item being styled, Tailwind is concerned with how it should be displayed. This makes it easier for developers to test out new styles, and change the layout.

What are Styled-Components?

Styled Components are one of the new ways to use CSS in modern JavaScript. It is meant to be a successor to CSS Modules,and is a way to write CSS that's scoped to a single component without leaking to any other element on the page.

Can we use Tailwind with Styled-Components at the same time?!

Yes, of course, thanks to the Twin.macro package! It allow us to use both of them at the same time. 😎

Let’s start

First, before you start this project, you have to know JavaScript basics and install Node.js on your machine.

Let’s start by creating an empty React project!

Go to where you want to save your project with the terminal, and type npx create-react-app netflix-ui

After it finishes, type code netflix-ui to open the project in your VSCode

Open a new terminal in VScode and type yarn start. This will open your browser automatically.

Okay now, let's clean up! Go to src/App.js, delete all the code, and replace all the code with this:

function App() {
  return (
    <>
      <h1>Hello world!</h1>
    </>
  );
}

export default App;

Now it will look like this:

Great! Let's add Netflix's colors. Go to src/index.css, and add these style properties in the body.

background-color: #111;
color: white;

Let's install the twin.macro

Open a new terminal in VSCode and enter this command

yarn add tailwindcss twin.macro @emotion/core @emotion/styled @emotion/react

Next up, we initialize Tailwind.

npx tailwindcss init --full

Add a new babelMacros key to the package.json file

"babelMacros": {
  "twin": {
    "config": "tailwind.config.js"
  }
},

Congratulations! You did it🎉

TMDB APIs

TMDb.org is a crowd-sourced movie information database used by many film-related consoles, sites, and apps! We will use their APIs to get the movie’s data, and to use their APIs we need to get an API key!

Go to themoviedb.org/signup, and create an account.

After creating an account log in, go to settings:

Then select 'API':

And you will find your API key there! Save it, because we will need it in the next step:

Get movies data and save it in state

In this step, we will get all the data we need from TMDB servers, and save it in our app to use it.

First, we need to install Axios. This is the library that will handle the API requests for us.

Open a new terminal and type:

yarn add axios

Importing axios, useState and useEffect Go to src/App.js, and add the next line at the top of it.

import { useState, useEffect } from 'react';
import axios from 'axios';

Next, we need the API URL, key (We got this in the previous step), and the movies endpoints

const URL = "https://api.themoviedb.org/3";
const API_KEY = "Put your API key here";

const endpoints = {
  originals: "/discover/tv",
  trending: "/trending/all/week",
  now_playing: "/movie/now_playing",
  popular: "/movie/popular",
  top_rated: "/movie/top_rated",
  upcoming: "/movie/upcoming",
};

We are getting the movies data from TMDB of 6 categories!

Initializing the states We will use useState to initialize a state for each movies category.

const [originals, setOriginals] = useState([]);
const [trending, setTrending] = useState([]);
const [nowPlaying, setNowPlaying] = useState([]);
const [popular, setPopular] = useState([]);
const [topRated, setTopRated] = useState([]);
const [upcoming, setUpcoming] = useState([]);

Now, our file will look like this:

Okay Let's get the data for each category

In the App component, we will add useEffect with the next pattern for each movie category.

useEffect(() => {
  // Load Originals
  axios
    .get(`${URL}${endpoints.originals}`, {
      params: {
        api_key: API_KEY,
      },
    })
    .then((res) => setOriginals(res.data.results));

  // Get other categories with the same pattern here

}, []);

Use the same pattern to get the other categories inside the useEffect.

Important note: Use only one useEffect for getting data

App Components

So in this project, we will need to build only three components.

Header
Hero (Which is the banner with a random movie)
Movies (Which is the Movies slider)

Let's start with the Movies component

Movies component is simple. It's made from three styled components.

1- Go to src folder, and create a new folder in it called components.

2- Inside src/components create new 2 files Movies.js and Movies.styles.js.

3- Go to Movies.styles.js.

Let's talk a little bit about using twin.macro

We need to import 2 things from twin.macro

styled to use Styled components
tw to use Tailwind CSS classes

You can import them with the next line.

import tw, { styled } from "twin.macro";

How we will use both of them at the same time? We will use this simple pattern to mix both of them.

export const YourStyledComponent = styled.div`

  // Put your pure CSS here.

  ${tw`

    // Put the Tailwind CSS classes here.

  `}

`;

Now Let's back to the Movies component!

MoviesContainer: It only needs the top and bottom margin my with 1 rem.

export const MoviesContainer = styled.div`
  ${tw`
    my-8
  `}
`;

MoviesTitle: It's h2 with bigger font size text-2xl, font weight font-bold, and uppercased uppercase with two rem left, and a right margin: mx-8.

export const MoviesTitle = styled.h2`
  ${tw`
      text-2xl
      font-bold
      uppercase
      mx-8
    `}
`;

Okay now let's import them in the Movies.js:

import { MoviesContainer, MoviesTitle } from "./Movies.styles";

Add the Movies component function. It accepts two values: title and movies.

function Movies({ title, movies }) {
  return (
    <MoviesContainer>
      <MoviesTitle>{title}</MoviesTitle>
    </MoviesContainer>
  );
}

export default Movies;

Go to src/App.js and import the Movie component.

import Movies from "./components/Movies";

And replace the hello world h1 with our movies component.

So we import the Movie component, and passed two props to it: the title, and the movie array state (We will use it later).

Now, save the file and look at the browser.

Great let's build the MoviesRow now, and render the movies.

Go to Movies.styles.js.

We need the MoviesRowto be

Flexbox flex
Scrolls left and right overflow-x-auto
Has one rem of margin top mt-4
Has one rem of padding p-4
Also we want to hide the scrollbar (Not supported in Tailwind CSS so we will use pure CSS).

the result:

export const MoviesRow = styled.div`
  ${tw`
      flex
      overflow-x-auto
      mt-4
      p-4
    `}

  &::-webkit-scrollbar {
    display: none;
  }
`;

As you can see, we hide the scrollbar in a way that is similar to SCSS because styled components support it.

Inside MoviesRow we will put multiple MoviesPoster which is img styled component.

MoviesPoster should have:

0.5 rem margin m-2
10 rem width w-40
Scale when user hover on it (We will use pure CSS)

The result:

export const MoviesPoster = styled.img`
  ${tw`
    m-2
    w-40
  `}

  // Scale the movie img when the user hovers on it.
  transition: all 0.2s;
  &:hover {
    transform: scale(1.09);
  }
`;

Next step, let's import the MoviesRow and 'MoviesPoster' styled components in the Movies.js component, and use .map to render the movies.

<MoviesRow>
  {movies.map((movie) => (
    <MoviesPoster
      key={movie.id}
      src={"https://image.tmdb.org/t/p/w300" + movie.poster_path}
      alt={movie.name}
    />
  ))}
</MoviesRow>

Your Movies.js file should look like this now

And if you go to the browser now, you should see this:

Let's copy the same Movies component in App.js for the other categories, and change the title and movies: Netflix UI all rows

Great, we did it. 😎

Hero component

The Hero component is simple:

Go to src/components, and create two new files: Hero.js and Hero.styles.js.

Inside Hero.styles.js, we need to add the first styled component which is the HeroContainer.

HeroContainer should have

Two rem of padding p-8
Height 80% of the screen's height (we will add it with pure CSS)
Background image (we will add it from props)
Background size cover important (pure CSS)

The result:

export const HeroContainer = styled.div`
  ${tw`
    p-8
  `}
  height: 80vh;
  background-size: cover !important;

  ${(props) =>
    `background: url('https://image.tmdb.org/t/p/original${props.background}');`}
`;

And we will pass a background prop to this styled component later.

HeroTitle is h1, should have

Bigger text size text-5xl
More font weight font-bold
One rem of margin bottom mb-4
Margin top of 40% of the screen's height (pure CSS)

The result:

export const HeroTitle = styled.h1`
  ${tw`
    text-5xl
    font-bold
    mb-4
  `}

  margin-top: 40vh;
`;

HeroDescription is p, should have

Bigger text size text-lg
Medium font weight font-medium
One rem with margin bottom mb-4
Width of 45 rem (pure CSS because 45 rem isn't supported in Tailwind CSS)
Max width of 80% of the screen's width (pure CSS)
Line height of 130%

The result:

export const HeroDescription = styled.p`
  ${tw`
    font-medium
    text-lg
    mb-4
  `}
  width: 45rem;
  max-width: 80vw;
  line-height: 1.3;
`;

And finally HeroButton.

export const HeroButton = styled.button`
  ${tw`
    cursor-pointer
    font-bold
    rounded
    px-8
    py-2
    mr-2
  `}

  background-color: rgba(51, 51, 51, 0.5);

  &:hover {
    background-color: #e6e6e6;
    color: black;
    transition: all 0.2s;
  }
`;

Let's go to Hero.js, and build everything.

import React from "react";
import {
  HeroButton,
  HeroContainer,
  HeroDescription,
  HeroTitle,
} from "./Hero.styles";

function Hero({ movie }) {
  console.log(movie);
  return (
    <HeroContainer background={movie?.backdrop_path}>
      <HeroTitle>{movie?.name}</HeroTitle>
      <HeroDescription>{movie?.overview}</HeroDescription>
      <HeroButton>Play</HeroButton>
      <HeroButton>My List</HeroButton>
    </HeroContainer>
  );
}

export default Hero;

Go to App.js, import it, and pass a random movie in the Hero component

<Hero movie={originals[Math.floor(Math.random() * originals.length)]} />

Now the Hero section is DONE🥳 Netflix UI hero

Header component

The Header component is the last component in this project and it's so simple because it's only one styled component. When you scroll down the header background, it should change to black!

Go to src/components, and create two new files: Header.js and Header.styles.js.

Inside Header.styles.js we need to add the first styled component which is the HeroContainer.

HeaderContainer should have

Flex & justify-between.
Fixed to top of the screen.
Z-index value bigger than other elements.
Switch background color based on the dark prop.
Images inside it should have height with two rem.

The result:

export const HeaderContainer = styled.div`
  ${tw`
    flex
    justify-between
    p-4
    fixed
    top-0
    w-full
    transition-all
    z-10
  `}

  ${(props) => (props.dark ? tw`bg-black` : tw`bg-transparent`)}

  img {
    ${tw`
      h-8
    `}
  }
`;

Let's go to Header.js, and put the Netflix logo and the Avatar in.

import React from "react";
import { HeaderContainer } from "./Header.styles";

function Header() {
  return (
    <HeaderContainer>
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/6/67/NewNetflixLogo.png"
        alt=""
      />
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png"
        alt=""
      />
    </HeaderContainer>
  );
}

export default Header;

Finally, Let's add an event listener for the window.scroll using useEffect and useState.

const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.scrollY > 100) {
        setIsDark(true);
      } else setIsDark(false);
    });

    return () => {
      window.removeEventListener("scroll");
    };
  }, []);

Now, pass isDark to the Header component.

<HeaderContainer dark={isDark}>

Import the Header component in the App.js, and go to your browser.

Congratulations! We made it! 🥳

Source Code

Also, here is the Github repo.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Mark Shenouda
@MarkSShenouda @markshenouda

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

The HTML Dialog Element: Enhancing Accessibility and Ease of Use Dialogs are a common component added to applications, whether on the web or in native applications. Traditionally there has not been a standard way of implementing these on the web, resulting in many ad-hoc implementations that don’t act consistently across different web applications. Often, commonly expected features are missing from dialogs due to the complexity of implementing them. However, web browsers now offer a standard dialog element. Why use the dialog element? The native dialog element streamlines the implementation of dialogs, modals, and other kinds of non-modal dialogs. It does this by implementing many of the features needed by dialogs for you that are already baked into the browser. This is helpful as it reduces the burden on the developer when making their applications accessible by ensuring that user expectations concerning interaction are met, and it can also potentially simplify the implementation of dialogs in general. Basic usage Adding a dialog using the new tag can be achieved with just a few lines of code. ` However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it. ` Then if you want to close it you can call the .close() method on the dialog, or press the escape key to close it, just like most other modals work. Also, note how a backdrop appears that darkens the rest of the page and prevents you from interacting with it. Neat! Accessibility and focus management Correctly handling focus is important when making your web applications accessible to all users. Typically you have to move the current focus to the active dialog when showing them, but with the dialog element that’s done for you. By default, the focus will be set on the first focusable element in the dialog. You can optionally change which element receives focus first by setting the autofocus attribute on the element you want the focus to start on, as seen in the previous example where that attribute was added to the close element. Using the .showModal() method to open the dialog also implicitly adds the dialog ARIA role to the dialog element. This helps screen readers understand that a modal has appeared and the screen so it can act accordingly. Adding forms to dialogs Forms can also be added to dialogs, and there’s even a special method value for them. If you add a element with the method set to dialog then the form will have some different behaviors that differ from the standard get and post form methods. First off, no external HTTP request will be made with this new method. What will happen instead is that when the form gets submitted, the returnValue property on the form element will be set to the value of the submit button in the form. So given this example form: ` The form element with the example-form id will have its returnValue set to Submit. In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted. You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog. In this case, you can call event.preventDefault() in the submit event listener like so: ` Once your desired response comes back from the server, you can close it manually by using the .close() method on the dialog. Enhancing the backdrop The backdrop behind the dialog is a mostly translucent gray background by default. However, that backdrop is fully customizable using the ::backdrop pseudo-element. With it, you can set a background-color to any value you want, including gradients, images, etc. You may also want to make clicking the backdrop dismiss the modal, as this is a commonly implemented feature of them. By default, the <dialog> element doesn’t do this for us. There are a couple of changes that we can make to the dialog to get this working. First, an event listener is needed so that we know when the user clicks away from the dialog. ` Alone this event listener looks strange. It appears to dismiss the dialog whenever the dialog is clicked, not the backdrop. That’s the opposite of what we want to do. Unfortunately, you cannot listen for a click event on the backdrop as it is considered to be part of the dialog itself. Adding this event listener by itself will effectively make clicking anywhere on the page dismiss the dialog. To correct for this we need to wrap the contents of the dialog content with another element that will effectively mask the dialog and receive the click instead. A simple element can do! ` Even this isn’t perfect though as the contents of the div may have elements with margins in them that will push the div down, resulting in clicks close to the edges of the dialog to dismiss it. This can be resolved by adding a couple of styles the the wrapping div that will make the margin stay contained within the wrapper element. The dialog element itself also has some default padding that will exacerbate this issue. ` The wrapping div can be made into an inline-block element to contain the margin, and by moving the padding from the parent dialog to the wrapper, clicks made in the padded portions of the dialog will now interact with the wrapper element instead ensuring it won’t be dismissed. Conclusion Using the dialog element offers significant advantages for creating dialogs and modals by simplifying implementation with reasonable default behavior, enhancing accessibility for users that need assistive technologies such as screen readers by using automatic ARIA role assignment, tailored support for form elements, and flexible styling options....

Oct 25, 2024

4 mins

HTMLJavaScript

Remix's evolution to a Vite plugin

The Remix / React Router news is a beautiful illustration of software evolution. You start with a clear idea of what you’re building, but it’s impossible to anticipate exactly what it will become. If you haven’t heard the news yet, Ryan Florence announced at React Conf 2024 that Remix will be a Vite plugin for React Router. It’s a sort of surprising announcement but it makes a lot of sense if you’ve been following along as Remix the project has evolved. In this post we’ll recap the evolution of the project and then dig into what this change means for the future of Remix in the Server Components era of React. 🗓️ October 2021 > Remix is open sourced In the beginning, Remix cost money. In October 2021 they received some seed funding and the project was open sourced. Remix was an exciting new framework for server-rendering React websites that included API’s for loading data on the server and submitting data to the server with forms. It started a trend in the front-end framework space that a lot of other popular frameworks have modeled after or taken inspiration from. 🗓️ March 2022 - September 2022 > Remixing React Router At some point they realized that the API’s that they had created for Remix were a more natural fit in React Router. In this post Ryan details the plans to move these Remix API’s into React Router. Several months later, React Router 6.4 is released with the action, loader, and other Remix API’s baked in. > "We've always thought of Remix as "just a compiler and server for React Router" After this release, Remix is now mostly as they described - a compiler and server for React Router. 🗓️ October 2023 - February 2024 > Remix gets Vite support If you’re not familiar with Vite, it’s an extremely popular tool for front-end development that handles things like development servers and code bundling/compiling. A lot of the modern front-end frameworks are built on top of it. Remix announced support for Vite as an alternative option to their existing compiler and server. Since Remix is now mostly “just a compiler and server for React Router” - what’s left of Remix now that Vite can handle those things? 🗓️ May 2024 > Remix is React Router The Remix team releases a post detailing the announcement that Ryan made at React Conf. Looking back through the evolution of the project this doesn’t seem like an out of the blue, crazy announcement. Merging Remix API’s into React Router and then replacing the compiler and server with Vite didn’t leave much for Remix to do as a standalone project. 🐐 React Router - the past, present, and future of React React Router is one of the oldest, and most used packages in the React ecosystem. > Since Remix has always been effectively "React Router: The Framework", we wanted to create a bridge for all these React Router projects to be able to upgrade to Remix. With Remix being baked into React Router and now supporting SPA mode, legacy React Router applications have an easier path for migrating to the next generation of React. https://x.com/ryanflorence/status/1791488550162370709 Remix vs React 19 If you’ve taken a look at React 19 at all, it turns out it now handles a lot of the problems that Remix set out to solve in the first place. Things like Server Components, Server Actions, and Form Actions provide the same sort of programming model that Remix popularized. https://x.com/ryanflorence/status/1791484663883829258 Planned Changes for Remix and React Router Just recently, a post was published giving the exact details of what the changes to Remix and React Router will look like. tl;dr For React Router * React Router v6 to v7 will be a non-breaking upgrade * The Vite plugin from Remix is coming to React Router in v7 * The Vite plugin simply makes existing React Router features more convenient to use, but it isn't required to use React Router v7 * v7 will support both React 18 and React 19 For Remix * What would have been Remix v3 is React Router v7 * Remix v2 to React Router v7 will be a non-breaking upgrade * Remix is coming back better than ever in a future release with an incremental adoption strategy enabled by these changes For Both * React Router v7 comes with new features not in Remix or React Router today: RSC, server actions, static pre-rendering, and enhanced Type Safety across the board The show goes on I love how this project has evolved and I tip my hat to the Remix/React Router team. React Router feels like a cozy blanket in an ecosystem that is going through some major changes which feels uncertain and a little scary at times. The Remix / React Router story is still being written and I’m excited to see where it goes. I’m looking forward to seeing the work they are doing to support React Server Components. A lot of people are pretty excited about RSC’s and there is a lot of room for unique and interesting implementations. Long live React Router 🙌....

Jul 10, 2024

4 mins

ReactViteRemix

Export Your Data from Universal Analytics before you lose it

Introduction In 2023, Google announced the retirement of Universal Analytics and told everyone to migrate to Google Analytics 4, commonly known as GA4. Google Analytics has long been a staple for businesses and website owners seeking insights into their audience and performance metrics. However, with the introduction of Google Analytics 4, there comes a pivotal moment for users of the older Universal Analytics (UA) platform. Difference between UA and GA4 What data will you lose? You will lose ALL of the historical data! By July 1, 2024, Google will delete all UA data, and you will no longer have access to it after that. Also, Universal Analytics will no longer track new conversions, affecting ad campaign performance that relies on these conversions for Smart Bidding. Audience lists from Universal Analytics will also disappear, potentially impacting media activation and performance. API requests tied to Universal Analytics properties will fail, preventing data deletion requests and causing Looker Studio to stop displaying Universal Analytics data. Additionally, Attribution Projects (beta) in Google Analytics will be deleted. How to Export Your Data There are multiple ways to export your data from Google Analytics, such as using the Google Analytics add-on for Google Sheets or using BigQuery integration to export historical data from your Universal Analytics 360 property. This article will discuss the easiest way to export your data using the Google Analytics add-on from Google Workspace Marketplace. From “Extensions” > “Google Analytics” > “Create new report” The Google Analytics extension will display a Wizard that requires the following steps: * Set a name for your report * Then, you select the Google Analytics account * Then, the property you want to export * Also, there are some optional configuration that helps you filter the data you want to export Then click on “Create Report,” and it will export the report for you Here is an example of the template https://docs.google.com/spreadsheets/d/1zXEBEQQk6TPeGb7-Wm2J0uM0q0XnTdJqrfikCTmYs8c/copy Running the Report After setting up the report template with the necessary configurations, users can run the report to extract their UA data into Google Sheets. Depending on the size of the dataset, the report may take some time to generate, especially for larger datasets spanning multiple years. In such cases, splitting the data into smaller chunks may be necessary to ensure efficient processing. Conclusion As Google transitions from Universal Analytics to Google Analytics 4, businesses and website owners must proactively preserve their valuable historical data. With the impending deletion of all Universal Analytics data by July 1, 2024, failing to export your data in time could result in significant data loss, affecting ad campaign performance and analytics capabilities. By following the outlined methods to export data using tools like the Google Analytics add-on for Google Sheets, you can ensure that your historical data is safely archived and accessible for future analysis....

May 23, 2024

3 mins

ToolingTips

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Understanding the Difference Between :focus and :focus-visible in CSS I have learned my fair share about the importance of keyboard accessibility, so I know that visual indication of the focused element is very important. But the well-known :focus pseudo-class is not always the best fit for this job. That's where :focus-visible comes in. Let's look at the differences between these two pseudo-classes and explore the best practices for using them effectively. What is the :focus Pseudo-Class? The :focus pseudo-class is a CSS selector that applies styles to any element that receives focus, regardless of how that focus was triggered. This includes focus events from keyboard navigation, mouse clicks, and touch interactions. Example Usage of :focus ` In this example, the button will display a blue outline whenever it is focused, whether the user clicks on it with a mouse, taps it on a touchscreen, or navigates to it using the keyboard. What is the :focus-visible Pseudo-Class? The :focus-visible pseudo-class is more specialized. It only applies styles to an element when the browser determines that the focus should be visible. This typically occurs when the user navigates via the keyboard or assistive technologies rather than through mouse or touch input. Example Usage of :focus-visible ` Here, the button will only show a blue outline when focused through keyboard navigation or another input method that usually requires visible focus indicators. Key Differences Between :focus and :focus-visible :focus - Behavior: Applies to any element that receives focus, regardless of the input method. - Use Cases: Ensures that all interactions with the element are visually indicated, whether by mouse, keyboard, or touch. :focus-visible - Behavior: Applies styles only when the focus should be visible, such as using a keyboard or assistive technology. - Use Cases: Ideal for scenarios where you want to provide focus indicators only to keyboard and assistive technology users while avoiding unnecessary outlines for mouse and touch users, typically required by design. Accessibility Implications :focus - Pros: - Guarantees that all users can see when an element is focused, which is critical for accessibility. - Cons: - Can lead to a suboptimal experience for mouse users, as focus styles may appear unnecessarily during mouse interactions. :focus-visible - Pros: - Enhances user experience by showing focus indicators only when necessary, thus keeping the interface clean for mouse and touch users. - Tailors the experience for keyboard and assistive technology users, providing them with clear visual cues. - Cons: - Additional considerations may be required to ensure that focus indicators are not accidentally omitted, especially in older browsers that do not support :focus-visible. - There may be cases where you want to show focus indicators for all users, regardless of input method. Best Practices for Using :focus and :focus-visible To achieve the best accessibility and user experience, combining both :focus and :focus-visible in your CSS is often a good idea. Combining :focus and :focus-visible ` Here is a Stackblitz example of what such styling could look like for you to try out and play with. Additional Tips - Test with Keyboard and Assistive Technology: Ensure that your web application is navigable using a keyboard (Tab, Shift + Tab, etc.) and that focus indicators are visible for those who rely on them. It's never a bad idea to include accessibility testing in your e2e testing suite. - Provide Clear Focus Indicators: Make sure that focus indicators are prominent and easy to see. A subtle or hard-to-spot focus indicator can severely impact accessibility for users who rely on keyboard navigation. Conclusion The :focus-visible pseudo-class offers a more refined way to manage focus indicators, improving accessibility and user experience, particularly for keyboard and assistive technology users. By understanding the differences between :focus and :focus-visible, and applying best practices in your CSS, you can create more accessible and user-friendly web applications. Remember, accessibility should never be an afterthought. By thoughtfully applying focus styles, you ensure that all users, regardless of how they interact with your site, can easily navigate and interact....

Nov 8, 2024

3 mins

AccessibilityCSSPlaywright

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

How to Create Netflix Clone with React.js, Tailwind CSS and Styled Components

What is Tailwind CSS?

What are Styled-Components?

Can we use Tailwind with Styled-Components at the same time?!

Let’s start

Let's install the twin.macro

TMDB APIs

Get movies data and save it in state

Okay Let's get the data for each category

App Components

Let's start with the Movies component

Let's talk a little bit about using twin.macro

Hero component

Header component

Source Code

Mark Shenouda

You might also like

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

Remix's evolution to a Vite plugin

Export Your Data from Universal Analytics before you lose it

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

Let's innovate together!

You might also like

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

Remix's evolution to a Vite plugin

Export Your Data from Universal Analytics before you lose it

Understanding the Difference Between `:focus` and `:focus-visible` in CSS