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. 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.

  7. 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…

  8. 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…

  9. 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.

  10. <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.

  11. HTMHell - #20 HTMHell special: close buttons

    posted on

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

  12. HTMHell - #14 not my type

    posted on

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

  13. HTMHell - #5 button-like-link

    posted on

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

  14. HTMHell - #3 image-buttons

    posted on

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

  15. HTMHell - #2 div with button role

    posted on

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

  16. HTMHell - #1 button disguised as a link

    posted on

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

  17. <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.

  18. 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.

  19. <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.

  20. <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.

  21. 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

  22. 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…

  23. 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...

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

    by Deque University

  25. 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…

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

    posted on by Can I use

  27. <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.

  28. 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.

  29. HTMHell - #18 main divigation

    posted on

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

  30. <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.

  31. <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.

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

    posted on

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

  33. <select>

    posted on by MDN

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

  34. 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).

  35. <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.

  36. <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.

  37. Styled Range Slider

    by Scott O'Hara

  38. 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…

  39. <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…

  40. <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.

  41. <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.

  42. 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.

  43. 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.

  44. 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.

  45. async function expression

    posted on by MDN

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

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

    posted on by Mathias Bynens

  47. await

    posted on by MDN

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

  48. 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. ...

  49. 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

  50. 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…

  51. 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

  52. 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

  53. 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

  54. 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.

  55. 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.

  56. The CSS “content” property accepts alternative text

    posted on by stefan judis

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

  57. 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),

  58. 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.

  59. 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 …

  60. 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.

  61. 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

  62. 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.

  63. 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.

  64. 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.

  65. 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.

  66. 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...

  67. 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.

  68. 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

  69. 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.

  70. 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.

  71. 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…

  72. 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…

  73. 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…

  74. Subgrid | Codrops CSS Reference

    posted on by Team Codrops

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

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

    posted on by Lea Verou

  76. LCH Colour picker

    by Lea Verou

  77. 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...

  78. 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,

  79. 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:

  80. 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.

  81. 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

  82. 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.

  83. 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.

  84. 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: || || ;

  85. Negative margins in CSS - QuirksBlog

    by Peter-Paul Koch

  86. 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

  87. 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.

  88. 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.

  89. ::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

  90. The CSS3 :not() selector

    posted on by Kilian Valkhof

    Old post, but still popular and relevant.

  91. :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

  92. :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.

  93. :nth Tester

    by CSS Tricks

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

    by James Menera

  95. :nth-child()

    posted on by MDN

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

  96. 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…

  97. :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.

  98. 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...

  99. 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 …

  100. 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>.

  101. 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.

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

    by Sven Wolfermann

  103. fixed headers jump :target (IE11 version)

    by Sven Wolfermann

  104. 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…

  105. Universal selectors

    posted on by MDN

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

  106. 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…

  107. 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

  108. 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