Skip to content

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

@westonruter

Description

@westonruter

As of ampproject/amphtml#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 ampproject/amphtml#20609 (comment) 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:

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 ampproject/amphtml#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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    BlockedCannot be worked because of upstream reasonsOptimizerSSRRelated to the serverside rendering of the Optimizer

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions