Last updated: December 28, 2023. Consider the following HTML markup: With the following styles applied via a CSS stylesheet: .content { width: 200px; height: 200px; background-color: #a52a2a; } In JavaScript, the styles applied to the with the class name of content can be accessed using the globally available getComputedStyle() function. The function accepts a HTML element and returns all its styling in object format: // Select element to retrieve styling from: const contentDiv = document.querySelector(‘.content’); // Pass element into getComputedStyle() const contentDivStyles = getComputedStyle(contentDiv); console.log(contentDivStyles); // CSSStyleDeclaration {…} Individual CSS styles can be accessed by querying properties on the CSSStyleDeclaration object…
Author: drweb
Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated. To detect if a user has their keyboard’s caps lock turn on, we’ll employ KeyboardEvent’s getModifierState method: document.querySelector(‘input[type=password]’).addEventListener(‘keyup’, function (keyboardEvent) { const capsLockOn = keyboardEvent.getModifierState(‘CapsLock’); if (capsLockOn) { // Warn the user that their caps…
The W3C’s Mike[tm] Smith (AKA @sideshowbarker) is the man with his head in the W3C validation markup checking tool source code; he makes the magic happen. Questions were asked for the HTML5 Doctor reader’s delight and edification. Russian Translation: Не проверив HTML5-кода, не суйся в воду — с Майком™ Смитом First off tell us a bit about what you do and what you work on Mike[tm] Smith – Deputy Director @W3C – permissive work mode edition I don’t work. I’m an old-world boulevardier. I drink tea with my pinky extended and I only expend effort on anything if it somehow amuses me to do so. For…
Images make websites look great, but they’re also the biggest performance bottleneck. They add huge file sizes, delay Largest Contentful Paint (LCP), and can even mess with Cumulative Layout Shift (CLS) if they aren’t handled properly. And while developers are quick to optimize JavaScript and CSS, images are often ignored—despite being the heaviest assets on most pages. So, how do we make images fast, responsive, and efficient? Here’s how: Choose the Right Image Format The format of an image has a massive impact on its size and loading speed. Picking the wrong one can easily double or triple your image payload. Check out this illustration: To the user, it’s the exact same image,…
There is a ::selection pseudo class selector in CSS that allows you to style what content (mostly: text) looks like when it’s selected. Say your website has pretty strong orange-colored branding, you could use this to extend the feel of that branding. Like: html { –brandColor: orange; } ::selection { background-color: var(–brandColor); }Code language: CSS (css) There is really only a couple of things you can set on ::selection (see the allowable properties bit on MDN), which makes sense. You wouldn’t want to be changing font-size on selection or anything like that as it would get messy quickly. I was…
We all love beautifully styled form controls but, due to the differences between operating system displays, styling them can be painful. Due to that pain, we’ve created scores of libraries to mock these controls. Unfortunately that sometimes comes at the cost of accessibility, performance, etc. One control that has traditionally been tough to style is the input[type=file] element. Said input variation visually contains a button and text, all being clickable. Bit of a Frankenstein’s monster if you ask me. Can we style the button part though? We can! To style the button button portion of input[type=file], you can use ::file-selector-button:…
Updated: 3rd August 2020 The question of whether HTML elements need the addition of ARIA role attributes to expose their semantics, is one that surfaces on a regular basis. The answer is maybe for a subset of elements, but increasingly no. Patrick Lauke modelling last seasons must have; HTML5 casual Polo neck with lumbar support [button] belt and [role] braces combo. ARIA roles add nothing to default semantics of most elements In some cases the semantics of a HTML element can be expressed by an ARIA role, state or property. This is fiendishly known as the element’s ‘Default Implicit ARIA…
The CSS language is full of small gaps which are frustrating to navigate. Between CSS properties to hide a container and its contents, there is still room for improvement. visibility: hidden keeps height and width integrity while display: none on a container hides everything. You can use .container > * to hide all contents of a container, but what if there was a better way? There is a better way to hide the contents of an element while respecting the container’s border and dimensions. That better way is using the content-visibility property: .my-container.contents-loading { content-visibility: hidden; } A demo of such…
One of the many new input types that HTML5 introduced is the date input type which, in theory, should allow a developer to provide the user with a simple, usable, recognisable method of entering a date on a web page. But sadly, this input type has yet to reach its full potential. Briefly, the date input type is a form element that allows the capture of a date from a user, usually via a datepicker. The implementation of this datepicker is up to the browser vendor, as the HTML5 specification does not tell vendors how to implement the input’s UI.…
Hey, I’m Fabio Carretti, a Creative and Frontend Developer based in Modena, Italy. With years of experience under my belt, I guess you could call me an old-school guy, but I’m always keen to stay ahead of the curve and embrace what’s next. I kicked off my journey in the late 2000s, coding MySpace profiles for bands (sounds prehistoric, right?). From there, I transitioned to WordPress and JavaScript, building countless creative websites. Over the years, I’ve worked with almost every tech stack imaginable. Lately, I’ve been diving deeper into AI, merging my creative development skills with advanced AI interfaces. Let’s…