A web development blog written by @davidleininger.
I feel like I should have known this one, but it was news to me. Today I learned that you can concatenate values in an aria-labelledby attribute. I can only think of a few times where I would have really wanted to use this instead of just writing out the aria-label , but it's nice to have it in my back pocket. It's simple just add multiple IDs in the order you want them to be concatenated. Like…
At first, when I saw :where() , I didn’t see how different it was from :is() , and I didn’t give it much of a second thought. To be fair, it is very similar. Just like :is() , :where() can take multiple arguments, and it won’t blow up if one of the arguments is invalid, as a standard list of selectors would. The critical difference is that :is() has the specificity of the most specific selector in…
Being a front-end dev, I have some kind of relationship with the terminal. Sometimes, I have a desire to learn more and be a hacker, but most of the time what I know gets me by. That said, sometimes I find something that is so simple that it instantly becomes a part of my workflow. That happened again today when Josh Comeau shared his post: The Front-End Developer's Guide to the Terminal . Like…
I've been making ordered lists in markdown for a long time. It's great to be able to use ordered lists just by writing the list out using numbers: 1. List item etc... Until recently, I've always hated reordering these lists and I'd default to unordered lists so I could reorder easier. That ends today. With ordered lists in markdown, you can just use 1. for each item. This will start the list at 1…
Specificity can be super confusing, and just when I think I have it really nailed down I learn something new. I'm not sure that I'm going to use this very often, but I didn't know that you can override style declarations with animation declarations. For example: /* Animation declarations take precedence over normal declarations */ body { animation : bg 0s forwards ; } @keyframes bg { to {…
I did not know that you can could set an SVG to overflow: visible; . I did not know that by default, SVGs were overflow: hidden; . I just thought that was how it worked. Only things inside the viewBox could be seen. More to come on this.
Lately, I've been focusing more and more on accessibility. The past few weeks I attended Manuel Matuzović's accessibility testing workshop hosted by Smashing Magazine. I learned a lot of gems in that workshop, but the Active Element Live Expression stands out as one of the simplest and most helpful. Note: As far as I'm aware, this only works in Chromium browsers. I didn't even know that you could…
The search inside of the Elements tab in the inspector isn't very helpful if you're trying to find specific tags. There is a really simple solution for this, use * tag . For example, if you're searching for an h2 , use the search term * h2 . This will pull find all of the elements instead of finding random h2 text in styles or svgs.
So I've got this whole lists section of the site where I list all of my opinions about things like the best sodas, broadway shows, pizzas in STL, and wives. Spoiler alert the last one is only one item. Fast forward to Halloween, and I realized that I needed to add a new list, a list of our family Halloween Costumes . This list needed to be grouped by year and starting from the most recent year and…
You know what really grinds my gears? When you take a screenshot on a Mac, hit the space bar for the whole app, and the dang screenshot comes with a shadow. I didn't want the app with its shadow, I just wanted the app window. I've known for a long time that you could just hold the option key and it would remove the shadow. If only there was a way to make it so none of my screenshots had shadows...…
By default, when tapping on an element, browsers wait 300ms for a potential double-tap to zoom. This can be sped up with a single css declaration: touch-action : manipulation ; It would be great for links and buttons: a, button { touch-action : manipulation ; } Using this declaration, browser immediately responds to taps instead of waiting 300ms for a "potential" second tap. This is great for…
I have been angry at Figma for a while not for not allowing me to scale type and the bouding box at the same time. This is one of those moments where I was angry thinking they didn't have a solution instead of looking. One quick google on the google machine later, and k is my new best friend. k allows you to scale the selected items including fonts. This for me is nice because I can scale to a…
To access query parameters in your Netlify Functions, you can access the event.queryStringParameters object available inside the handler function. For example if you have an email query string, you can access it using exports . handler = ( event , context , callback ) => { event . queryStringParameters . email //do something with it }
If you use -p when initializing Tailwind for your project it will generate a PostCSS config file at the same time. # creates both a tailwind.config.js and postcss.config.js npx tailwindcss init -p
Ever tried debugging an element that keeps disappearing when it loses focus once you start using devtools? Emulate a focused page - you can get it from the [⌘]+[P] Command Menu, or Global Preferences
Use the :empty {} selector to hide empty paragraphs (often created by users within content management systems) p:empty { display : none ; }
It’s important that color is not used as the only visual means of conveying information. Add this class to your CSS to switch to grayscale mode and check if your user interface is still comprehensible and visual elements distinguishable. .a11y-grayscale { filter : grayscale ( 100% ) !important ; } < html class = " a11y-gray " lang = " en " /> ... </ html >
Autofill inputs using security codes sent by SMS! < input autocomplete = " one-time-code " /> Support Working on iOS!
Help users by giving them the correct keyboard to use on touch screen devices. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode <!-- No virtual keyboard. For when the page implements its own keyboard input control. --> < input inputmode = " none " /> <!-- Standard input keyboard for the user's current locale. --> < input inputmode = " text " /> <!-- Fractional numeric…
Add a hidden pseudo element with the same text string but set it to the bold font size example: https://codepen.io/hexagoncircle/pen/WNrYPLo .menu.fix .menu-link::after { content : attr ( data-text ) ; content : attr ( data-text ) / "" ; height : 0 ; visibility : hidden ; overflow : hidden ; user-select : none ; pointer-events : none ; font-weight : var ( --bold ) ; @media speech { display : none…
You can add the option { once: true } to an event listener to automatically remove it when has been invoked. example: https://codepen.io/matuzo/pen/wvMOpXp?editors=1010 document . querySelector ( '.always' ) . addEventListener ( 'click' , ( ) => { alert ( 'always' ) } ) ; // after this fires it's removed from the dom document . querySelector ( '.once' ) . addEventListener ( 'click' , ( ) => {…
Background repeat round and space repeat background images without clipping the images. Pro Tip: It really helps if your images are square, round stretches in both directions. background-repeat : round ; background-repeat : space ; See the Pen Background Repeat Options by David Leininger ( @davidleininger ) on CodePen .
Linting HTML with CSS is a great tool to help find problematic markup. Empty Links This selector hunts for links that have: no href an empty href a "#" href (button perhaps?) a:is(:not([href]), [href=""], [href="#"]) { outline : 2px dotted red ; } Missing Alt Text Highlight images missing alt text with: img:not([alt]) { outline : 2px dotted red ; }
IE10 and IE11 specific style media query. @media all and ( -ms-high-contrast : none ) , ( -ms-high-contrast : active ) { /* IE10+ CSS styles go here... */ }
The "inset" logical property gem is shorthand for all the sides of your box. This sets all sides to 0, snapping each corner to the corner of it's parent. .full { position : absolute ; inset : 0 ; } Support Pretty green
Style if mobile Style if desktop Style if stylus Style if controller Combine together // laptop/desktop styles @media ( hover : hover ) { } // smartphones/touchscreens @media ( hover : none ) and ( pointer : coarse ) { } // device with stylus @media ( hover : none ) and ( pointer : fine ) { } // Wii/Kinect/etc @media ( hover : hover ) and ( pointer : coarse ) { } // mouse/touchpad @media ( hover :…
Prevent anchor links from scrolling behind a sticky header. #anchor { scroll-margin-top : 1em ; } Support The scroll-margin-top property works in all modern browsers, but has no IE support.
CSS has built-in operators to count the number of elements rendered. ol { /* Give our counter a name, any name will do */ counter-reset : ordered-list ; } ol li { /* Indicate that we should increment the count for every list item */ counter-increment : counts ; list-style : none ; } ol li:before { /* Use the count in the :before pseudoelement */ content : counter ( counts ) '. ' ; display :…
Change the input style and apperance if the the placeholder is visible. :placeholder-shown input { // styles } input:placeholder-shown { // specific styles if placeholder is shown } Support Great - Partial IE
It's always funny when people say to me, "I hate CSS." Sometimes I ask why, but most of the time I just move on disgusted. CSS is fun and I love learning more and more and more about it. I think one of the reasons people don't CSS is because there is so much to it, and so much nuance. It's similar to the english language: there, they're, their. One example of that nuance is Attribute Selectors.…
Simplify flexbox positioning with using one property instead of two. .item { display : flex ; place-content : center ; } It's also works with grid. .item { display : grid ; place-content : center ; } Support Not IE
This exact set of properties now actually works to do multiple-line truncation in a fairly well supported way. .box p { display : -webkit-box ; -webkit-line-clamp : 1 ; /* # of lines to truncate */ -webkit-box-orientation : vertical ; overflow : hidden ; }
Disable parent scrolling when child container (like sidebar) reaches scroll end. .child { overscroll-behavior : contain ; }
You can save JavaScript snippets in Chrome Dev Tools for future use. https://www.youtube.com/watch?v=N4zO_E2xt94