Black Lives Matter! ✊🏾

Misc

All links without tags.
  1. A Complete Guide to Links and Buttons | CSS-Tricks

    posted on

    Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.

  2. HTMHell - #16 alt, no wait…, aria-label, no wait…, alt

    posted on

    A collection of bad practices in HTML, copied from real websites.

  3. HTMHell - #6 link with void operator as href value

    posted on

    A collection of bad practices in HTML, copied from real websites.

  4. <a>: The Anchor element

    posted on by MDN

    The HTML a element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

  5. Using the aria-describedby attribute

    posted on by MDN

    The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description…

  6. The difference between aria-label and aria-labelledby - Tink - Léonie Watson

    posted on

  7. Using the aria-label attribute

    posted on by MDN

    The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

  8. Using the aria-labelledby attribute

    posted on by MDN

    The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. This idea is similar to how the “for” a…

  9. Why authors should avoid aria-relevant

    posted on by Rob Dodson

    The ARIA attribute, aria-relevant, is supposed to affect how live regions are processed by screen readers. It is designed to provide a hint to screen readers that content being removed from a web…

  10. Using the aria-relevant attribute

    posted on by MDN

    The aria-relevant attribute is an optional value used to describe what types of changes have occurred to an aria-live region, and which are relevant and should be announced. Any change that is not relevant acts in the same manner it would if the aria-live attribute were set to off.

  11. Micro-note on aria-roledescription – HTML Accessibility

    posted on

  12. Avoid aria-roledescription

    posted on

    HTML has all sorts of built-in features that, when used correctly, are accessible, will localize, and which just work. For example, if I want a button, I use <button>, and a screen reader will announce it as button. For users in other languages, they will hear whatever is their word…

  13. Using the aria-roledescription attribute - Tink - Léonie Watson

    posted on

  14. <section>: The Generic Section element

    posted on by MDN

    The HTML section element represents a standalone section — which doesn’t have a more specific semantic element to represent it — contained within an HTML document.

  15. HTMHell - #20 HTMHell special: close buttons

    posted on

    A collection of bad practices in HTML, copied from real websites.

  16. HTMHell - #14 not my type

    posted on

    A collection of bad practices in HTML, copied from real websites.

  17. HTMHell - #5 button-like-link

    posted on

    A collection of bad practices in HTML, copied from real websites.

  18. HTMHell - #3 image-buttons

    posted on

    A collection of bad practices in HTML, copied from real websites.

  19. HTMHell - #2 div with button role

    posted on

    A collection of bad practices in HTML, copied from real websites.

  20. HTMHell - #1 button disguised as a link

    posted on

    A collection of bad practices in HTML, copied from real websites.

  21. <button>: The Button element

    posted on by MDN

    The HTML button element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.

  22. A Complete Guide to Data Attributes | CSS-Tricks

    posted on by Chris Coyier

    Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.

  23. <dialog>: The Dialog element

    posted on by MDN

    The HTML dialog element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow.

  24. <figure>: The Figure with Optional Caption element

    posted on by MDN

    The HTML figure (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (figcaption) element.

  25. When there is no content between headings

    posted on

    The website of Hidde de Vries, freelance front-end developer.

  26. Heading off confusion: When do headings fail WCAG?

    posted on by David Swallow

    Ed note: this post talks about evaluating headings in the context of an accessibility review while the following week’s post, Headings & Accessibility, talks about providing headings as visu

  27. There Is No Document Outline Algorithm

    posted on by Adrian Roselli

    I figured I would state the entire argument in the title. After all, as of this writing and the last seven-plus years, the statement is accurate as far as the browsers are concerned. I am penning this as sort of a follow-up to my post from 2013, The Truth about…

  28. Focus management and inert | CSS-Tricks

    posted on

    Many forms of assistive technology use keyboard navigation to understand and take action on screen content. One way of navigating is via the Tab key. You

  29. inert

    posted on by MDN

    The HTMLElement property inert is a Boolean, when present, may make the browser “ignore” the element from assistive technologies, page search and text selection. This can be useful when building UIs such as modals where you would want to “trap” the focus inside the modal when it’s visible.

  30. WICG/inert

    posted on by WICG

    Polyfill for the inert attribute and property. Contribute to WICG/inert development by creating an account on GitHub.

  31. The lang attribute: browsers telling lies, telling sweet little lies

    posted on by Manuel Matuzović

    The lang attribute is an essential component in the basic structure of an HTML document. It’s important that we set it correctly.

  32. CSS for internationalisation

    posted on by Chen Hui Jing

    I’ve come across people who do not think that CSS is related to internationalisation at all, but if you think...

  33. <html> element must have a lang attribute Axe Rules | Deque University | Deque Systems

    by Deque University

  34. lang

    posted on by MDN

    The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single “language tag” in the format defined in Tags for Identifying Languag…

  35. Can I use... Support tables for HTML5, CSS3, etc

    posted on by Can I use

  36. <meter>: The HTML Meter element

    posted on by MDN

    The HTML meter element represents either a scalar value within a known range or a fractional value.

  37. HTML attribute: multiple

    posted on by MDN

    The Boolean multiple attribute, if set, means the form control accepts one or more values. Valid for the email and file input types and the select, the manner by which the user opts for multiple values depends on the form control.

  38. HTMHell - #18 main divigation

    posted on

    A collection of bad practices in HTML, copied from real websites.

  39. <nav>: The Navigation Section element

    posted on by MDN

    The HTML nav element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

  40. <progress>: The Progress Indicator element

    posted on by MDN

    The HTML progress element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

  41. HTMHell - #10 <section> is no replacement for <div>

    posted on

    A collection of bad practices in HTML, copied from real websites.

  42. <select>

    posted on by MDN

    The HTML select element represents a control that provides a menu of options

  43. tabindex

    posted on by MDN

    Das Globale Attribut tabindex gibt an, ob sein Element fokussiert werden kann, ob und an welcher Stelle es an der sequentiellen Tastaturnavigation beteiligt ist (normalerweise mit der Tabulatortaste, daher der Name).

  44. <input type=“date”>

    posted on by MDN

    input elements of type=“date” create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.

  45. <input type=“number”>

    posted on by MDN

    input elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

  46. Styled Range Slider

    by Scott O'Hara

  47. Value Bubbles for Range Inputs | CSS-Tricks

    posted on by Chris Coyier

    HTML5 range inputs, in supported browsers and by design, don’t show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you’ll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers abov…

  48. <input type=“range”>

    posted on by MDN

    input elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like th…

  49. <input type=“search”>

    posted on by MDN

    input elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.

  50. <video>: The Video Embed element

    posted on by MDN

    The HTML Video element (video) embeds a media player which supports video playback into the document. You can use video for audio content as well, but the audio element may provide a more appropriate user experience.

  51. TIL — The power of JSON.stringify replacer parameter | pawelgrzybek.com

    posted on by Pawel Grzybek - https://pawelgrzybek.com/

    I had a challenging problem with JSON stringify that ignored my data in a place where I expected sets of values. Luckily I managed to solve it in a very elegant way.

  52. JSON.stringify()

    posted on by MDN

    The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

  53. JavaScript async and await in loops | Zell Liew

    posted on by Zell Liew

    I share some gotchas you have to watch out for when you use async and await in loops.

  54. async function expression

    posted on by MDN

    The async function keyword can be used to define async functions inside expressions.

  55. Asynchronous stack traces: why await beats Promise#then() · Mathias Bynens

    posted on by Mathias Bynens

  56. await

    posted on by MDN

    The await operator is used to wait for a Promise. It can only be used inside an async function.

  57. min(), max(), and clamp(): three logical CSS functions to use today

    posted on

    Min, max, and clamp provide some powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.

  58. Everything I Learned About min(), max(), clamp() In CSS - Ahmad Shadeed

    posted on by iShadeed

    CSS Comparison Functions (min(), max(), clamp()) become supported in Firefox on 8 April 2020, which means that they are now supported in all major browsers. ...

  59. CSS Clamp: The Goldilocks of CSS Math Functions - Steve Fenton

    posted on by Steve Fenton

    There is a problem I have wrestled with a couple of times, which was frustrating to solve... but can now be easily solved using clamp, which is currently in an Editors Draft of the CSS Values and Units Module Level 4 specification. It is sat alongside similar mathmatical CSS

  60. clamp()

    posted on by MDN

    The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be u…

  61. How to use CSS clipping

    posted on

    Using clipping in CSS can help us move away from everything in our designs looking like a box. By using various basic shapes, or an SVG, you can create a clip path. Then cut away the parts of an element you don’t want to show.

  62. Unfortunately, clip-path: path() is Still a No-Go | CSS-Tricks

    posted on by Ana Tudor

    I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the

  63. clip-path | CSS-Tricks

    posted on

    The clip-path property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area. There used to be a

  64. Let’s Take a Deep Dive Into the CSS Contain Property | CSS-Tricks

    posted on by Travis Almand

    Compared to the past, modern browsers have become really efficient at rendering the tangled web of HTML, CSS, and JavaScript code a typical webpage

  65. Helping Browsers Optimize With The CSS Contain Property — Smashing Magazine

    posted on by Rachel Andrew

    The CSS contain property gives you a way to explain your layout to the browser, so performance optimizations can be made. However, it does come with some side effects in terms of your layout.

  66. content-visibility: the new CSS property that boosts your rendering performance

    posted on

    The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to leverage this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec a…

  67. Short note on content-visibility: hidden – HTML Accessibility

    posted on by Steve Faulkner

    What I am interested in is how it is exposed to screen readers and other assistive technology that make use of the content information represented in the browser accessibility tree.

  68. Here’s what I didn’t know about “content”

    posted on by Manuel Matuzović

    In part 3 of my series I’m trying to find out what I didn’t know about the `content` property.

  69. The CSS “content” property accepts alternative text

    posted on by stefan judis

    The CSS ‘content’ property allows a way to provide an alternative text

  70. CSS Content | CSS-Tricks

    posted on

    CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon),

  71. content

    posted on by MDN

    The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.

  72. Now You See It: Understanding Display by Rachel Andrew

    posted on by Rachel Andrew

    CSS Layout is all about boxes. We know that some boxes are blocks, and others are inline, and we can change the display type of elements by changing the value of the display property. That property holds the key to much more than this, however. It is the foundation on which all layout is built; the …

  73. Digging Into The Display Property: The Two Values Of Display — Smashing Magazine

    posted on by Rachel Andrew

    We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series.

  74. display | CSS-Tricks

    posted on by Sara Cope

    Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. There are only a handful

  75. Digging Into The Display Property: Box Generation — Smashing Magazine

    posted on by Rachel Andrew

    Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at the values which control box generation, for those times when you don’t want to generate a box at all.

  76. Understanding CSS Grid: Creating A Grid Container — Smashing Magazine

    posted on by Rachel Andrew

    In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid.

  77. Digging Into The Display Property: Grids All The Way Down — Smashing Magazine

    posted on by Rachel Andrew

    Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior.

  78. :focus-visible Is Here · Matthias Ott – User Experience Designer

    posted on by Matthias Ott

    Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.

  79. Giving users and developers more control over focus

    posted on by Google

    Chrome 86 introduces two new features that improve both the user and developer experience when it comes to working with focus The :focus-v...

  80. Understanding CSS Grid: Grid Lines — Smashing Magazine

    posted on by Rachel Andrew

    In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use the grid lines to place items.

  81. Understanding grid placement through building a HTML periodical table

    posted on by Chen Hui Jing

    I’ve been using CSS grid to build layouts for quite a while now, and all my designs to date involved...

  82. Understanding CSS Grid: Grid Template Areas — Smashing Magazine

    posted on by Rachel Andrew

    In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use grid-template-areas to place items.

  83. Achieving Vertical Alignment (Thanks, Subgrid!) | CSS-Tricks

    posted on

    Our tools for vertical alignment have gotten a lot better as of late. My early days as a website designer involved laying out 960px wide homepage designs

  84. Cool Little CSS Grid Tricks for Your Blog | CSS-Tricks

    posted on by Ana Tudor

    I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more

  85. Smashing Meets - 19th May 2020 - Rachel Andrew

    posted on by Rachel Andrew

    In this talk, Rachel will introduce Subgrid alongside use cases, example code, and some thoughts on where we might see Grid heading in the future.

  86. Constrained CSS grids without max-width

    posted on by Ethan Marcotte

    Stumbled across a little layout technique while working on my latest redesign. I think it’s helpful; maybe you’ll think so, too.

  87. Animating CSS Grid Rows and Columns

    posted on by Chen Hui Jing

    One of the biggest things in version 66 of Firefox was the ability to animate grid rows and columns when using Grid layout. This feature had been written into the specification for a while now, but…

  88. Animating CSS Grid

    posted on by CSS IRL

    Soooo, Jen Simmons just dropped a surprise bombshell on Twitter – CSS Grid grid-template-columns and grid-template-rows properties are now…

  89. New in Firefox 66: Animating CSS Grid - LogRocket Blog

    posted on by Facundo Corradini

    Firefox is continuously improving, and the Mozilla team manages to surprise us with every new release. We have seen outstanding improvements on their dev tools recently that are pushing many devs to use of Firefox in development, also the browser implementation of CSS modules and APIs are growing co…

  90. Subgrid | Codrops CSS Reference

    posted on by Team Codrops

    Subgrid Learn all about CSS Subgrid in this CSS Reference entry by Hui Jing Chen.

  91. LCH colors in CSS: what, why, and how? | Lea Verou

    posted on by Lea Verou

  92. LCH Colour picker

    by Lea Verou

  93. The Thing With Leading in CSS · Matthias Ott – User Experience Designer

    posted on by Matthias Ott

    Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.

  94. Using calc to figure out optimal line-height

    posted on by Jesús Ricarte

    The following is a guest post by Jesús Ricarte, a front-end developer and volunteer translator for A List Apart in Spanish. I’m very glad to have him writi...

  95. How to Tame Line Height in CSS | CSS-Tricks

    posted on

    In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height,

  96. line-height | CSS-Tricks

    posted on

    The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display:

  97. line-height

    posted on by MDN

    The line-height CSS property sets the height of a line box. It’s commonly used to set the distance between lines of text.

  98. List Style Recipes | CSS-Tricks

    posted on by Chris Coyier

    Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a

  99. Here’s what I didn’t know about list-style-type

    posted on by Manuel Matuzović

    In Chrome 79+, Firefox 39+, and Opera 66+ it’s possible to define a string value as the bullet of an ordered or unordered list.

  100. list-style-type

    posted on by MDN

    The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

  101. list-style | CSS-Tricks

    posted on by Sara Cope

    The list-style property is a shorthand property that sets values for three different list-related properties in one declaration: ul { list-style: || || ;

  102. Negative margins in CSS - QuirksBlog

    by Peter-Paul Koch

  103. margin | CSS-Tricks

    posted on by Sara Cope

    The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders. Margins are set

  104. Everything You Need To Know About CSS Margins — Smashing Magazine

    posted on by Rachel Andrew

    Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.

  105. Custom bullets with CSS ::marker

    posted on

    It is now trivial to customize the color, size or type of number or bullet when using a <ul> or <ol>.

  106. CSS Lists, Markers, And Counters — Smashing Magazine

    posted on by Rachel Andrew

    There is more to styling lists in CSS than you might think. In this article, Rachel starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification &mdash; markers and counters.

  107. ::marker | CSS-Tricks

    posted on by Geoff Graham

    The ::marker pseudo-element is for applying list-style attributes on a given element. It effectively targets the bullet-point or number generated by a

  108. How to use CSS masking

    posted on

    CSS masking gives you the option of using an image as a mask layer. This means that use can use an image, an SVG, or a gradient as your mask, to create interested effects without an image editor.

  109. mask-image

    posted on by MDN

    The mask-image CSS property sets the image that is used as mask layer for an element.

  110. The CSS3 :not() selector

    posted on by Kilian Valkhof

    Old post, but still popular and relevant.

  111. :not() | CSS-Tricks

    posted on by Sara Cope

    The :not(X) property in CSS is a negation pseudo class and accepts a simple selector1 as an argument. Essentially, just another selector of any kind. :not

  112. :not()

    posted on by MDN

    The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

  113. :nth Tester

    by CSS Tricks

  114. Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges

    by James Menera

  115. :nth-child()

    posted on by MDN

    The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

  116. Quantity Queries for CSS

    posted on by Heydon Pickering

    In responsive design, we think a lot about space, especially in the context of screen sizes. But the amount of content or the number of elements is bound to affect space, too, just as unpredictably…

  117. :nth-last-child()

    posted on by MDN

    The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.

  118. Flexbox and absolute positioning

    posted on by Chen Hui Jing

    Recently, I’ve been trying to build an open source video conferencing application specifically for online meetups. Just like every other...

  119. How to prevent anchor links from scrolling behind a sticky header with one line of CSS

    posted on by Chris Ferdinandi

    Yesterday, we looked at how to create sticky headers with the position: sticky CSS property. One problem with sticky headers are anchor links. By default, they snap to the top of the document, behind the sticky navigation menu. You can see it yourself in this demo. Today, I want to talk about a CSS …

  120. Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks

    posted on by Chris Coyier

    The problem: you click a jump link like <a href=”#header-3″>Jump</a> which links to something like <h3 id=“header-3”>Header</h3>.

  121. scroll-margin

    posted on by MDN

    The scroll-margin property is a shorthand property which sets all of the scroll-margin longhands, assigning values much like the margin property does for the margin-* longhands.

  122. scroll-margin-top / scroll-padding, smooth scroll and fixed headers

    by Sven Wolfermann

  123. fixed headers jump :target (IE11 version)

    by Sven Wolfermann

  124. Axiomatic CSS and Lobotomized Owls

    posted on by Heydon Pickering

    Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational m…

  125. Universal selectors

    posted on by MDN

    The CSS universal selector (*) matches elements of any type.

  126. Writing Modes And CSS Layout — Smashing Magazine

    posted on by Rachel Andrew

    An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew be…

  127. A First Look at `aspect-ratio` | CSS-Tricks

    posted on

    Oh hey! A brand new property that affects how a box is sized! That’s a big deal. There are lots of ways already to make an aspect-ratio sized box (and I’d

  128. Designing An Aspect Ratio Unit For CSS — Smashing Magazine

    posted on by Rachel Andrew

    What problems will the new aspect ratio unit solve? A look at the design of a new CSS feature.

Tags