We’re used to implementing common UI functional components in JavaScript, such as accordion, tooltips, text truncation, and so on. But with the introduction of new HTML and CSS features that do not support older browsers, we can create UI components less in JavaScript and more in the logical parts of code (validation, data processing, etc.).

Some implementations do feel a bit off base and inflexible, but they can be useful for singleton components in small projects. Why implement a one-time-only accordion component in JavaScript (or, nostalgically, jQuery) on your website? This is how I thought about adding an accordion component to the footer of my personal website on mobile.

Here are some examples of elements that can be implemented with zero JavaScript.

Responsive text truncation

CSS text truncation is easy to implement and performs well because we don’t have to edit the HTML content of the text, just render the result. Single-line text truncation is well supported on older browsers, while multi-line text truncation is only supported on newer browsers.

HTML:

<section class="flex">
  <h2>Use Flexbox</h2>
  <article class="wrapper">
    <p class="text--truncated">Yonghe nine years, at the age of Guichou, at the beginning of late spring, would go for an outing at the Lanting, shanyin Kuiji. Gather the sage together, and grow the salt less. Here there are mountains, forests and bamboo; And there is a clear current exciting turbulence, around the band, led to think that the sandy-cup water, row sit next. Although there is no silk and bamboo orchestra sheng, a crystal, also enough to Syria.</p>
  </article>
</section>

<section class="table">
  <h2>Use the Table</h2>
  <article class="wrapper">
    <p class="text--truncated">Yonghe nine years, at the age of Guichou, at the beginning of late spring, would go for an outing at the Lanting, shanyin Kuiji. Gather the sage together, and grow the salt less. Here there are mountains, forests and bamboo; And there is a clear current exciting turbulence, around the band, led to think that the sandy-cup water, row sit next. Although there is no silk and bamboo orchestra sheng, a crystal, also enough to Syria.</p>
  </article>
</section>

<section class="multiline">
  <h2>Multiline text</h2>
  <div class="wrapper">
    <p class="text--truncated">Yonghe nine years, at the age of Guichou, at the beginning of late spring, would go for an outing at the Lanting, shanyin Kuiji. Gather the sage together, and grow the salt less. Here there are mountains, forests and bamboo; And there is a clear current exciting turbulence, around the band, led to think that the sandy-cup water, row sit next. Although there is no silk and bamboo orchestra sheng, a crystal, also enough to Syria.</p>
  </div>
</section>

Copy the code

CSS:

/* WITH FLEXBOX */
.flex .wrapper {
  display:flex;
}
  
.flex .text--truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* WITH TABLE */
.table .wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}
  
.table .text--truncated {
  display: table-cell;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MULTI-LINE */
.multiline .text--truncated {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}
Copy the code

Star rating

The star rating component is an essential element of most survey forms. There are several ways to do this with CSS: background images, JavaScript, ICONS, and so on. The easiest way to do this is to use ICONS and native checkboxes.

The downside of this implementation is that the HTML radio buttons are in reverse order (score values from 5 to 1), because we need to select the checked radio button and all the radio buttons behind it, and CSS cannot be implemented without reverse order. The ~ selector can only select siblings of elements, so it can only be reversed.

This implementation is very flexible and easy to customize.

<div class="rating">
  <input class="rating__input hidden--visually" type="radio" id="5-star" name="rating" value="5" required />
  <label class="rating__label" for="5-star" title="5 out of 5 rating"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">5 out of 5 rating</span></label>
  <input class="rating__input hidden--visually" type="radio" id="4-star" name="rating" value="4" />
  <label class="rating__label" for="4-star" title="4 out of 5 rating"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">4 out of 5 rating</span></label>
  <input class="rating__input hidden--visually" type="radio" id="3-star" name="rating" value="3" />
  <label class="rating__label" for="3-star" title="3 out of 5 rating"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">3 out of 5 rating</span></label>
  <input class="rating__input hidden--visually" type="radio" id="2-star" name="rating" value="2" />
  <label class="rating__label" for="2-star" title="2 out of 5 rating"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">2 out of 5 rating</span></label>
  <input class="rating__input hidden--visually" type="radio" id="1-star" name="rating" value="1" />
  <label class="rating__label" for="1-star" title="1 out of 5 rating"><span class="rating__icon" aria-hidden="true"></span><span class="hidden--visually">1 out of 5 rating</span></label>
</div>
Copy the code

CSS:

/* -- Required CSS (not customizable) -- */. Rating {display: inline-flex; flex-direction: row-reverse; } /* Hiding elementsinan accessible way */ .hidden--visually { border: 0; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* -- Required CSS (customizable) -- */.rating__label {cursor: pointer; color: gray; Padding - left: 0.25 rem; Padding - right: 0.25 rem; } .rating__icon::before { content:"";
}

.rating__input:hover ~ .rating__label {
  color: lightgray;
}

.rating__input:checked ~ .rating__label {
  color: goldenrod;
}

Copy the code

Tooltip/drop-down menu

This is a very flexible element, and its CSS logic can be applied to both ToolTips and drop-down menus, because both work similarly, with hover and click (or touch) support.

The problem with this implementation is that, due to its Focus style, the tooltip (or drop-down menu) remains open after a click until the user clicks outside the element.

HTML:

<div>This is an example of a <a href="#" class="tooltip" aria-label="The tooltip or a hint is a common GUI element that describes the item it's related to.">Tooltip</a>. Click on it to learn more.</div>
Copy the code

CSS:

/* --- Required CSS (not customizable) --- */ .tooltip:focus::after, .tooltip:hover::after { content: attr(aria-label); display: block; } /* --- Required CSS (customizable) --- */ .tooltip:focus::after, .tooltip:hover::after { position: absolute; top: 100%; The font - size: 1.2 rem; background-color:#f2f2f2;Border - the radius: 0.5 rem; color: initial; padding: 1rem; width: 13rem; Margin - top: 0.5 rem; text-align: left; } .tooltip { position: relative; color: goldenrod; display: inline-block; } .tooltip:hover::before { top: 100%; right: 0; left: 0; margin: -1rem auto 0; display: block; border: solid transparent; content:"";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #f2f2f2;
    border-width: 1rem;
}

Copy the code

Modal dialog box

This implementation is a bit hacky, relying entirely on the query string in the URL. The Id in the URL must match the modal dialog element to be opened.

Source: codepen. IO/AdrianBece /…

Input box label text float

Source: codepen. IO/AdrianBece /…

Accordion effect

More recently, HTML has been able to implement the native accordion effect with < Details > and

elements, but the downside is that it doesn’t have a lot of style choices, so developers have to implement it themselves. Fortunately, by leveraging checkbox and checkbox logic, we can implement accordion components without relying on JavaScript.

The downside of this implementation is that it relies on input elements, and its logic requires additional HTML code, but on the other hand it is more accessible.

Source: codepen. IO/AdrianBece /…

conclusion

As you can see, pure CSS implementations rely on CSS selectors such as: Focus and :placeholder-shown instead of JavaScript logic code. Some of these CSS solutions are considered hacky, but perform well, are flexible, and do not rely on JavaScript.

I used a few CSS implementations in the project to avoid completely using JavaScript for visual effects.

Of course, there are many pure CSS implementations out there, but I’ve just listed a few that I find interesting. If you have other ideas, feel free to share them in the comments!

communication

Welcome to scan the code to follow the wechat public number “1024 translation station”, to provide you with more technical dry goods.