[Code Demos] 5 More HTML and CSS Features You Didn't Know Existed (And One Work-in-Progress You Didn't Know You Wanted)
Articles in Style and Layout | By August R. Garcia
Published 6 months agoMon, 27 May 2019 16:56:02 -0700 | Last update 6 months agoMon, 27 May 2019 17:00:35 -0700
Even after working with HTML and CSS for years, there are always new things to discover and new features being added. Do already know these tricks or do you bring great shame upon your family?
6,050 views, 1 RAM, and 0 comments
- 5 More HTML and CSS Features You Didn't Know Existed
- @supports
- Scroll Snapping
- Code for the Demo Above
- Lesser-Known HTML Event Attributes
- onoffline/ononline demo
- onresize demo
- Easily Handle Multiple Image Options with the <picture> Tag
- Code Used for the Demo Above
- Scrollbar Styling
- Code Used for the Demo Above
- One CSS Proposal-in-Progress You Didn't Know You Wanted
- [Upcoming] CSS3 Native Mixins
- Honorable Mentions
As you know, you can use HTML and CSS to make websites. Here are some more things that you didn’t know about HTML and CSS. Or maybe you already knew. Congratulations.
5 More HTML and CSS Features You Didn't Know Existed
@supports
The @supports CSS rule allows for developers to check whether a user's browser supports particular CSS features. For example, to check whether a user's browser supports the use of display:grid, the following code snippet can be used:
<p><em>Your browser <span style="font-weight:bold;" id="supports_grid">does <span id="sg_not">not</span></span> support display:grid.</em></p>
<style>
@supports (display: grid) { #supports_grid { color:green; } #sg_not {display:none;} }
@supports not (display: grid) { #supports_grid { color:red; } }
</style>Your browser does not support display:grid.
In addition to the obvious use cases, this feature also has implications for detecting user agent spoofing, especially when used with the JavaScript equivalent of CSS.supports. Checking for discrepancies between browser behavior and the client-specified user-agent can be used to detect whether a user-agent is being spoofed. Detecting user-agent mismatches by checking how browsers handle (among other factors) CSS rules is a practice that goes back a while; for example, reCaptcha uses user-agent mismatch detection, which is discussed at 6:29 in the video below:
This is also discussed in the written report for the same presentation on pages 3-4. While reCaptcha likely uses a different mechanism to detect these specific differences in browser functionality, the @supports rule may faciliate basic user-agent spoofing detection, particularly for milder use cases.
Ironically, while the @supports rule has relatively good support, there are a few browsers that do not support it.
Scroll Snapping
The CSS scroll-snap module is best demonstrated with the interactive demos below, which could easily be modified for features such as creating an image gallery, making a landing page that snaps to particular sections, and so on.
Code for the Demo Above
<div id="ss-wrapper">
<div class="ss-demo mandatory" style="background-color:grey;">
<div style="background-color:green;"></div>
<div style="background-color:yellow;"></div>
<div style="background-color:red;"></div>
</div>
<div class="ss-demo proximity" style="background-color:grey;">
<div style="background-color:green;"></div>
<div style="background-color:yellow;"></div>
<div style="background-color:red;"></div>
</div>
</div>
<style>
/* For Alignment */
#ss-wrapper { display:flex; justify-content:space-around; }
.ss-demo {
/* For Alignment */
width:40%;
/* The Actual Code */
scroll-snap-points-y: repeat(300px);
overflow-y: scroll;
height:300px;
}
/* Set Snap Behavior - Always snap or only if close to boundary? */
.ss-demo.mandatory { scroll-snap-type: y mandatory; }
.ss-demo.proximity { scroll-snap-type: y proximity; }
.ss-demo div { height:300px; scroll-snap-align: start; }
</style>Lesser-Known HTML Event Attributes
While there are many commonly used HTML event attributes, such as onclick and onmouseover, there are many additional event attributes that are lesser-used. Several of these include:
onoffline/ononline demo
This sentence will update if you go on or offline.
<!DOCTYPE html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">
<p>You are <strong id="online_status">???</strong>.</p>
<script>
function onFunction() { document.getElementById("online_status").innerHTML = "online"; }
function offFunction() { document.getElementById("online_status").innerHTML = "offline"; }
</script>
</body>
</html>onresize demo
Your window size is 630x1200.
<!DOCTYPE html>
<html>
<body onresize="record_window_size()">
<p>Your window size is <strong id="size_info" >???</strong>.</p>
<script>
function record_window_size() {
document.getElementById("size_info" ).innerHTML = window.innerHeight + "x" + window.innerWidth;
} record_window_size();
</script>
</body>
</html>Easily Handle Multiple Image Options with the <picture> Tag
In general, when an image is created with the <img> tag, mobile-responsiveness is set up using style rules that contain @media queries. However, it is also possible to use the HTML <picture> tag to easily provide multiple images or image versions to be used on different devices and/or display sizes.
In the example above, if your window size is 993 pixels wide or larger, you'll see a grey icon; if it's between 768 to 992 pixels wide (inclusive), you'll see a red icon; if it's 767 pixels wide or under, you'll see a green icon. If your window size matches none of these conditions, you'll see a default icon (random-data-icon.png) with a question mark on it (although this case should not happen here).
Code Used for the Demo Above
<picture>
<source srcset="https://www.256kilobytes.com/storage/icons/graphics-card-icon-grey.png" media="(min-width: 993px)">
<source srcset="https://www.256kilobytes.com/storage/icons/graphics-card-icon-red.png" media="(min-width: 768px)">
<source srcset="https://www.256kilobytes.com/storage/icons/graphics-card-icon-green.png" media="(max-width: 767px)">
<img src="https://www.256kilobytes.com/storage/icons/random-data-icon.png" />
</picture>Scrollbar Styling
Most websites use the browser's default, built-in scrollbar. However, there is some existing browser support, specifically in WebKit-based browsers, for the use of the ::-webkit-scrollbar pseudo-element as well as a number of other supportin pseudo-elements such as ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb. If your browser supports these technologies, you can see them in action below with a custom scrollbar on the left and the default on the right:
While built-in CSS support for custom scrollbars is still relatively experimental, there are several articles that preview this type of functionality in more depth, such as this article by scrotch.io and this article by csstricks.com.
Code Used for the Demo Above
<style>
/* Alignment */
#scroll-wrapper {
display:flex;
justify-content:space-around;
}
.ss-demo {
width:40%;
overflow-y: scroll;
height:300px;
}
.ss-demo div { height:300px; }
/* Actual Code */
#scroll-wrapper .ss-demo.custom::-webkit-scrollbar { width: 16px; }
#scroll-wrapper .ss-demo.custom::-webkit-scrollbar-thumb { background: cyan ; border-radius:10px;}
#scroll-wrapper .ss-demo.custom::-webkit-scrollbar-thumb:hover { background: lightcyan; }
</style>
<div id="scroll-wrapper">
<div class="ss-demo custom" style="background-color:grey;">
<div style="background-color:green;"></div>
<div style="background-color:yellow;"></div>
<div style="background-color:red;"></div>
</div>
<div class="ss-demo" style="background-color:grey;">
<div style="background-color:green;"></div>
<div style="background-color:yellow;"></div>
<div style="background-color:red;"></div>
</div>
</div>One CSS Proposal-in-Progress You Didn't Know You Wanted
[Upcoming] CSS3 Native Mixins
Many people like mixins, which is one large reason why CSS preprocessors like SASS are used. For example, my home boy at scotch.io, who I have literally never talked to, but whatever, wrote a post about how to use SASS mixins.
However, if you’re reading this from the future, you don’t need that shit, unless you need to support some shitty browser that sucks ass and doesn’t support the @apply rule. As mentioned in the previous post on HTML and CSS tricks that you didn’t know about, CSS variables exist. Soon, this functionality will be extended to allow CSS such as the following to facilitate native mixins:
/* Define a CSS Variable */
:root {
--link-style: {
color:green;
font-style:italic;
}
}
/* Use @apply to Add the Rule Set */
a { @apply --link-style; }Honorable Mentions
- Modify images with pure CSS by adding a grayscale, blur, or other filters.
- Use the initial-letter CSS property for to create custom styles for the first letter in an element, such as these examples.
- The nonce attribute can be used to improve security when using inline styles and scripts.
- There is a draft of a proposed CSS nesting module.
- There's an experimental API for detecting device orientation and orientation events.
- There's a built-in web API for touch events touch events.
- The HTML <a> ping attribute exists and can be used to provide a "space-separated list of URLs" to which POST requests should be sent upon the link being clicked, generally for analytics and/or tracking purposes.
Hash Brown (6 months ago) 🐏 ⨉ 1 Posted by August R. Garcia 6 months ago
Edit History
• [2019-05-27 16:56 PDT] August R. Garcia (6 months ago)• [2019-05-27 16:56 PDT] August R. Garcia (6 months ago)
• [2019-05-27 16:56 PDT] August R. Garcia (6 months ago)
🕓 Posted at 27 May, 2019 16:56 PM PDT
Post a New Comment
To leave a comment, login to your account or create an account.
Do you like having a good time?
Read Quality Articles
Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.
View Articles →
Argue with People on the Internet
Use your account to explain why people are wrong on the Internet forum.
View Forum →
Vandalize the Wiki
Or don't. I'm not your dad.
View Wiki →
Ask and/or Answer Questions
If someone asks a terrible question, post a LMGTFY link.
View Answers →
Make Some Money
Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.