You Don't Need JS

JavaScript has been the go-to language for dynamic web applications and interactions for many years. However, with the advancements in CSS, many of the functionalities that once required JavaScript can now be accomplished with just CSS. In this article, we will explore some of the things you may have needed JavaScript for in the past but can now achieve with CSS only.

Dropdowns:

Dropdown menus are a popular way to provide users with additional navigation options on a website. In the past, JavaScript was commonly used to create dropdown menus. However, with the introduction of the CSS :hover selector, dropdown menus can now be created using just CSS.

Here is an example of a CSS-only dropdown menu:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  position: relative;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

nav ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

Pinterest-style grids:

Pinterest-style grids are a popular layout choice for displaying images or other content in a masonry-style layout. In the past, JavaScript was commonly used to create these types of layouts. However, with the introduction of the CSS Grid Layout and Flexbox, Pinterest-style grids can now be created using just CSS.

Here is an example of a CSS-only Pinterest-style grid:

<div class="grid">
  <div class="item"><img src="image-1.jpg" /></div>
  <div class="item"><img src="image-2.jpg" /></div>
  <div class="item"><img src="image-3.jpg" /></div>
  <div class="item"><img src="image-4.jpg" /></div>
  <div class="item"><img src="image-5.jpg" /></div>
  <div class="item"><img src="image-6.jpg" /></div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

.item {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

Sliders

Sliders, also known as carousels, are a common feature on many websites, allowing users to browse through multiple images or content sections. Previously, JavaScript was used to create sliders, but now it can be done entirely with CSS using the scroll-snap property.

The scroll-snap property allows elements to snap to specific points during scrolling. This property can be applied to container elements, such as a div, to create a slider effect. Here's an example code snippet:

.slider {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.slide {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
}

In this example, we set the container div to display as a flex container with horizontal scrolling. We also set the scroll-snap-type property to x mandatory, which means that the container will snap to the nearest scroll-snap-align element. Each slide element is set to take up the full width of the container and snap to the start of the container.

Sticky Menus

Sticky menus, also known as fixed menus, are navigation menus that stay visible on the screen even as the user scrolls. Previously, JavaScript was used to create this effect, but now it can be done entirely with CSS using the position property.

The position property can be set to fixed to make an element stay in a fixed position on the screen, regardless of scrolling. Here's an example code snippet:

nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

In this example, we set the position property of the nav element to fixed, which makes it stay at the top of the screen. We also set the top property to 0 to make sure it stays at the top of the screen and the width property to 100% to make sure it takes up the full width of the screen.

Scroll Snap

Scroll snap is a feature that allows elements to snap to specific points during scrolling. Previously, JavaScript was used to create this effect, but now it can be done entirely with CSS using the scroll-snap property.

The scroll-snap property can be applied to container elements to make them snap to specific points during scrolling. Here's an example code snippet:

.container {
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: start;
}

In this example, we set the scroll-snap-type property of the container to y mandatory, which means that it will snap to the nearest scroll-snap-align element vertically. We also set the scroll-snap-align property of each section to start to make sure it snaps to the start of each section.

Parallax Backgrounds

Parallax scrolling has been a popular web design trend for several years now, used to create a sense of depth and immersion on a website. Traditionally, parallax effects required JavaScript to work, but CSS has now made it possible to achieve parallax scrolling with just a few lines of code.

Here's an example of how you can create a parallax effect using CSS:

.parallax {
  background-image: url("background-image.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  height: 100vh;
}

.parallax__content {
  position: relative;
  z-index: 1;
  padding: 50px;
}

.parallax__content h1 {
  font-size: 4rem;
  color: #fff;
  text-align: center;
  margin-top: 0;
}

In the example above, we have a section with a background image that is set to cover the entire section. The background-attachment property is set to fixed, which creates the parallax effect. The parallax__content element is positioned relatively and given a higher z-index than the background image, so it appears on top of the image. You can customize the effect further by adjusting the background-position property.

Accordions

Accordions are a common web feature used to display information in a compact and organized way. In the past, JavaScript was required to create accordions, but now CSS has made it possible to achieve the same effect with just a few lines of code.

Here's an example of how you can create an accordion using CSS:

Sure, here's an example HTML and CSS code for building an accordion using only CSS and HTML:

HTML:

<div class="accordion">
  <input type="checkbox" id="accordion1" />
  <label for="accordion1">Accordion Heading 1</label>
  <div class="accordion__content">Accordion Content 1</div>

  <input type="checkbox" id="accordion2" />
  <label for="accordion2">Accordion Heading 2</label>
  <div class="accordion__content">Accordion Content 2</div>

  <input type="checkbox" id="accordion3" />
  <label for="accordion3">Accordion Heading 3</label>
  <div class="accordion__content">Accordion Content 3</div>
</div>

CSS:

.accordion {
  font-family: sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

.accordion label {
  display: block;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 10px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-bottom: none;
  transition: all 0.2s ease-in-out;
}

.accordion label:hover {
  background-color: #e2e2e2;
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-top: none;
}

input[type="checkbox"]:checked + label {
  background-color: #e2e2e2;
}

input[type="checkbox"]:checked + label + .accordion__content {
  max-height: 500px; /* Adjust this to fit your content */
}

In the HTML, we have a container element with multiple inputs and labels. Each input is linked to a label and when the label is clicked, the corresponding content is revealed. In the CSS, we have styles for the labels, the content, and the behavior when the label is checked. The max-height property of the .accordion__content element is set to 0 by default, and is transitioned to the maximum height when the input is checked.

Cons of the CSS Only Approach

While the ability to accomplish previously JavaScript-only features with CSS is certainly exciting, it's important to note that there are some cons to this approach as well. One major drawback is accessibility issues. Many CSS-only features rely on visual cues, such as hover effects, to work properly. However, these cues are not accessible to users who rely on assistive technology, such as screen readers. It's important to ensure that any CSS-only features are also accessible to all users.

Another potential issue with CSS-only features is browser compatibility. While CSS is widely supported across modern browsers, there may be some features that are not supported by older browsers.