ampproject / ampproject/amp-toolbox-php

Add SSR transformer which adds `noscript > style[amp-noscript]` with base styles

Open
#349 2 comments 0 reactions 0 assignees View on GitHub
Blocked Optimizer SSR
Dominant language
PHP
Stars
74
Forks
25
Avg merge
1d 15h
Merged PRs (30d)
3

Description

As of https://github.com/ampproject/amphtml/issues/20609, AMP now supports a `noscript > style[amp-noscript]` element to include styles specifically targeting pages on which JS is disabled. This is particularly important to ensure that certain AMP components have all their information accessible to such users. For example, in https://github.com/ampproject/amphtml/issues/20609#issuecomment-901426550 there is the example of `amp-accordion` where all accordion sections should be forcibly expanded in no-JS context, which can be achieved with this CSS:

```css
amp-accordion > section:not([expanded]) > :last-child {
display: block !important;
}
```

(Disregard the use of `!important` not being allowed in AMP, for which I've opened https://github.com/ampproject/amphtml/issues/36051.)

In the same way as there is an `AmpRuntimeCss` transformer to inline `style[amp-custom]` there should also be a transformer to populate `noscript > style[amp-noscript]` with styles that ensure AMP components are able to be rendered accessibly to users with JS disabled. Part of this effort should include contributing base `noscript` styles to each component which we can then be downloaded from the AMP CDN.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading the existing AmpRuntimeCss transformer and the AMP issue references describing style[amp-noscript]. Define how a new transformer should populate noscript > style[amp-noscript], then identify the component base styles and CDN contribution process needed for accessible no-JS rendering.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
backend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.