iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): fix styling of `<code>` elements on older browsers (#41051) 

Previously, styling of `<code>` elements utilized the `:not()` CSS
pseudo-class with multiple selectors (`:not(h1, h2, ...)`). It turns out
that older browsers (such as IE11) do not support multiple selectors in
a single `:not()` instance.
(See [MDN][1] and [CanIUse][2] for more info.)

This commit fixes `<code>` styling to use multiple separate `:not()`
instances instead (`:not(h1):not(h2)...`), so that they are styled
correctly on older browsers as well.

NOTE:
This change seems to trigger some kind of bug in LightHouse that causes
the a11y score of `/start` to be calculated as 0 (which is clearly
wrong). This happens on Linux (tested on CI and locally using the
Windows Subsystem for Linux (WSL)) - on Windows the score is computed
correctly as 98/100.
([Example failure][3])

The bug seems to be related to the layout of the content and goes away
if we change the viewport size (for example, switching to LightHouse's
`desktop` config) or make another change that affects the content's
layout (for example, reducing the padding of `<code>` elements).

To work around the issue, this commit updates the `test-aio-a11y.js`
script to test `/start-routing` instead of `/start`.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description:~:text=Using%20two%20selectors
[2]: https://caniuse.com/css-not-sel-list
[3]: https://circleci.com/gh/angular/angular/931038

PR Close #41051
This commit is contained in:
George Kalpakas 2021-03-09 14:15:16 +02:00 committed by Andrew Kushnir
parent 269d7e4d22
commit d80d6ea3f6
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/scripts/test-aio-a11y.js
View File

@ -27,7 +27,7 @@ const MIN_SCORES_PER_PAGE = {
'cli/add': 98, 'cli/add': 98,
'docs': 100, 'docs': 100,
'guide/docs-style-guide': 96, 'guide/docs-style-guide': 96,
'start': 98, 'start-routing': 93,
'tutorial': 98, 'tutorial': 98,
}; };

2
aio/src/styles/2-modules/_code.scss
View File

@ -169,7 +169,7 @@ aio-code {
} }
} }
:not(h1, h2, h3, h4, h5, h6, pre) > code { :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) > code {
background-color: rgba($lightgray, 0.5); background-color: rgba($lightgray, 0.5);
border-radius: 4px; border-radius: 4px;
color: $deepgray; color: $deepgray;