Discovering Hidden Gems in HTML and CSS

2 responses to “What are your favourite lesser known parts of HTML/CSS (or parts you’re shocked others don’t know about)?”

1. It’s great to hear that you’re diving into the more nuanced aspects of HTML and CSS! There are definitely some lesser-known features and best practices that can significantly enhance both the performance and user experience of web applications. Let me share a few that I find particularly valuable and would recommend bringing to the forefront in your internal discussions.

   1. The <picture> Element

   As you’ve mentioned, the <picture> element is extremely powerful for responsive design. It allows developers to define different image sources based on various conditions, such as screen size, pixel density, and more, which can enhance performance significantly. The use of srcset and sizes attributes alongside the <picture> element helps ensure that users receive appropriately sized images, which is critical for mobile performance.

   2. aspect-ratio CSS Property

   The aspect-ratio property is indeed a game-changer for maintaining the desired aspect ratios without relying on lifecycle hacks or padding tricks. This property can help avoid layout shifts—a common issue that affects user experience and SEO. By applying aspect-ratio to images or video elements, you can ensure they scale properly across different layouts.

   3. CSS Container Queries

   Though it’s still in the process of being widely adopted, CSS Container Queries can significantly improve responsive design by allowing styles to adapt based on the size of a container rather than the viewport. This is especially useful in widget-like components where the same element can have different styles depending on its surrounding environment.

   css
.container {
container-type: inline-size;
}
.container > .item {
width: 100%;
}
@container (min-width: 500px) {
.container > .item {
width: 50%;
}
}

   4. The <details> and <summary> Elements

   These HTML elements can add a lot of interactivity without the need for JavaScript. Users can toggle content visibility, which is great for FAQs or expandable sections. Utilizing these can enhance accessibility since they provide a built-in focus state and keyboard navigation.

   5. CSS Logical Properties

   CSS Logical Properties provide a way to handle layout in a more adaptable manner, particularly for internationalization (i18n). Instead of traditional physical directions (like margin-left), you can use logical ones (like margin-inline-start). This ensures your design can automatically adapt to various writing modes and text densities.

   6. CSS clip-path

   The clip-path property allows you to create complex shapes and cutouts for elements without needing a graphic design application. This not only results in cleaner, more meaningful markup but also can have performance benefits, particularly with vector graphics in modern browsers.

   7. The <template> Element

   This element acts as a container for content that is not rendered when the page loads. It’s particularly useful for JavaScript-heavy applications where you may want to clone and insert elements dynamically without impacting the DOM immediately.

   “`html
   

   “`

   8. Custom Properties (CSS Variables)

   While custom properties have gained traction, many developers still underutilize them. They allow for more maintainable and scalable CSS, enabling dynamic theming and easy adjustments across a large codebase without needing to rewrite multiple definitions.

   css
:root {
--main-color: #3498db;
}
button {
background-color: var(--main-color);
}

   Practical Advice

   1. Encourage Learning: Organize lunchtime learning sessions or workshops focusing on these lesser-known features to keep your team updated.

   2. Experiment: Incorporate these elements into small projects or feature enhancements to see their impacts in real time.

   3. Documentation: Create an internal wiki or documentation that outlines these features, providing quick examples on how to implement them effectively.

   By exploring and utilizing these less known, yet potent features of HTML and CSS, your team can enhance performance, user experience, and design consistency. It’s always a good idea to stay informed about the evolving web standards and embrace modern practices to keep your frontend codebase efficient and future-proof.

   Reply

2. What a fantastic topic to explore! I completely agree about the hidden gems like the `` element and the `aspect-ratio` property—both have made a significant impact on modern Web Design!

   I’d love to add another lesser-known feature that I believe is incredibly useful: the `

   Reply