gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): use mediaText for CSSHelp (#42393)

Browse Source 
* fix(curriculum): use mediaText in CSSHelp

prevent selection of style elements with class or media attributes
this should avoid picking up some browser extensions
This commit is contained in:
Shaun Hamilton
2021-06-07 22:33:58 +01:00
committed by GitHub
parent 40401b0792
commit 35b18829d1
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/utils/css-help.ts
View File

@ -75,9 +75,9 @@ class CSSHelp {
ele.style?.getPropertyValue(property)
);
}
getRuleListsWithinMedia(conditionText: string): CSSStyleRule[] {
getRuleListsWithinMedia(mediaText: string): CSSStyleRule[] {
const medias = this.getCSSRules('media') as CSSMediaRule[];
const cond = medias?.find(x => x.conditionText === conditionText);
const cond = medias?.find(x => x?.media?.mediaText === mediaText);
const cssRules = cond?.cssRules;
return Array.from(cssRules || []) as CSSStyleRule[];
}
@ -86,7 +86,10 @@ class CSSHelp {
const link: HTMLLinkElement | null = this.doc?.querySelector(
"link[href*='styles']"
);
const style: HTMLStyleElement | null = this.doc?.querySelector('style');
// Most* browser extensions inject styles with class/media attributes
const style: HTMLStyleElement | null = this.doc?.querySelector(
'style:not([class]):not([media])'
);
if (link?.sheet?.cssRules?.length) {
return link.sheet;
} else if (style) {

4
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
View File

@ -37,14 +37,14 @@ You should declare a `@media` query for devices with a `height` less than or equ
```js
const media = new __helpers.CSSHelp(document).getCSSRules('media');
assert(media.some(x => x.conditionText?.includes('(max-height: 800px)')));
assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
```
Your `p` element should have a `font-size` of `10px` when the device `height` is less than or equal to `800px`.
```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
assert(rules?.find(x => x.selectorText === 'p')?.style.fontSize === "10px");
assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
```
Your `p` element should have an initial `font-size` of `20px` when the device `height` is more than `800px`.