oddbird / oddbird/css-anchor-positioning

Better handling of stylesheet links that have `disabled` and/or `media`

Open
#246 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
493
Forks
18
Avg merge
12h 37m
Merged PRs (30d)
5

Description

The issue:

  • The browser will not load stylesheets from links with the disabled attribute.
  • The polyfill currently will load such links, and if any changes are applied, replace them with new links without disabled
  • Even if the polyfill is modified to preserve disabled, it might not be desirable to fetch the resource in the first place. (fixed in #262)
  • The same might be said for links with a media attribute when the media query is not currently satisfied.

My rough idea to address the issue is basically this:

  • For any stylesheet link that the polyfill would process:
    • Check if it is disabled. If so, add a MutationObserver with { attributeFilter: ['disabled'] } that will handle processing the stylesheet if it were to become no longer disabled.
    • Check if it has media, and if so, create a MediaQueryList. If the media query list does not match, add an event listener for its change event that will handle processing the stylesheet if it were to become applicable according the media query.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named. Start by locating the polyfill code that processes stylesheet links, then trace its handling of disabled and media attributes; done means inapplicable stylesheets are not processed until their state changes or their media query matches.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.