#csstip — Public Fediverse posts

When making cosmetic filters, keep this in mind

CSS pseudo elements can't be used with procedural cosmetic filters because querySelectorAll() doesn't work with these.

https://github.com/uBlockOrigin/uBlock-issues/discussions/3424

This also applies to pseudo-classes like :disabled and :hover

The specification states the following about pseudo-elements like ::after and ::before

Note: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.

https://www.w3.org/TR/selectors-api/#grammar (Behind CloudFlare)

According to https://stackoverflow.com/a/49106279 (behind CloudFlare), ::before and ::after can not be selected because:

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript [sic]

#CSS #CSSTip #uBlockOrigin

When making cosmetic filters, keep this in mind

CSS pseudo elements can't be used with procedural cosmetic filters because querySelectorAll() doesn't work with these.

https://github.com/uBlockOrigin/uBlock-issues/discussions/3424

This also applies to pseudo-classes like :disabled and :hover

The specification states the following about pseudo-elements like ::after and ::before

Note: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.

https://www.w3.org/TR/selectors-api/#grammar (Behind CloudFlare)

According to https://stackoverflow.com/a/49106279 (behind CloudFlare), ::before and ::after can not be selected because:

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript [sic]

#CSS #CSSTip #uBlockOrigin

When making cosmetic filters, keep this in mind

CSS pseudo elements can't be used with procedural cosmetic filters because querySelectorAll() doesn't work with these.

https://github.com/uBlockOrigin/uBlock-issues/discussions/3424

This also applies to pseudo-classes like :disabled and :hover

The specification states the following about pseudo-elements like ::after and ::before

Note: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.

https://www.w3.org/TR/selectors-api/#grammar (Behind CloudFlare)

According to https://stackoverflow.com/a/49106279 (behind CloudFlare), ::before and ::after can not be selected because:

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript [sic]

#CSS #CSSTip #uBlockOrigin

When making cosmetic filters, keep this in mind

CSS pseudo elements can't be used with procedural cosmetic filters because querySelectorAll() doesn't work with these.

https://github.com/uBlockOrigin/uBlock-issues/discussions/3424

This also applies to pseudo-classes like :disabled and :hover

The specification states the following about pseudo-elements like ::after and ::before

Note: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.

https://www.w3.org/TR/selectors-api/#grammar (Behind CloudFlare)

According to https://stackoverflow.com/a/49106279 (behind CloudFlare), ::before and ::after can not be selected because:

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript [sic]

#CSS #CSSTip #uBlockOrigin

When making cosmetic filters, keep this in mind

CSS pseudo elements can't be used with procedural cosmetic filters because querySelectorAll() doesn't work with these.

https://github.com/uBlockOrigin/uBlock-issues/discussions/3424

This also applies to pseudo-classes like :disabled and :hover

The specification states the following about pseudo-elements like ::after and ::before

Note: Authors are advised that while the use of pseudo-elements in selectors is permitted, they will not match any elements in the document, and thus would not result in any elements being returned. Therefore, authors are advised to avoid the use of pseudo-elements in selectors that are passed to the methods defined in this specification.

https://www.w3.org/TR/selectors-api/#grammar (Behind CloudFlare)

According to https://stackoverflow.com/a/49106279 (behind CloudFlare), ::before and ::after can not be selected because:

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript [sic]

#CSS #CSSTip #uBlockOrigin

#tinyCSStip As I just saw this in a '24 tutorial to make an absolutely positioned pseudo extend `8px` outside its parent in all directions.

❌ DON'T 🙀
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 8px

✅ DO 😼 (1 declaration, not 6)
inset: -8px

Notes:
✨ yes, there are still valid use cases for `position: absolute` pseudos instead of `grid`
✨ no, that `padding` wasn't relevant later

#css #cssTrick #cssTip #code #coding #frontend #web #webDev #dev #webDevelopment

#tinyCSStip As I just saw this in a '24 tutorial to make an absolutely positioned pseudo extend `8px` outside its parent in all directions.

❌ DON'T 🙀
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 8px

✅ DO 😼 (1 declaration, not 6)
inset: -8px

Notes:
✨ yes, there are still valid use cases for `position: absolute` pseudos instead of `grid`
✨ no, that `padding` wasn't relevant later

#css #cssTrick #cssTip #code #coding #frontend #web #webDev #dev #webDevelopment

#tinyCSStip As I just saw this in a '24 tutorial to make an absolutely positioned pseudo extend `8px` outside its parent in all directions.

❌ DON'T 🙀
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 8px

✅ DO 😼 (1 declaration, not 6)
inset: -8px

Notes:
✨ yes, there are still valid use cases for `position: absolute` pseudos instead of `grid`
✨ no, that `padding` wasn't relevant later

#css #cssTrick #cssTip #code #coding #frontend #web #webDev #dev #webDevelopment

#tinyCSStip As I just saw this in a '24 tutorial to make an absolutely positioned pseudo extend `8px` outside its parent in all directions.

❌ DON'T 🙀
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 8px

✅ DO 😼 (1 declaration, not 6)
inset: -8px

Notes:
✨ yes, there are still valid use cases for `position: absolute` pseudos instead of `grid`
✨ no, that `padding` wasn't relevant later

#css #cssTrick #cssTip #code #coding #frontend #web #webDev #dev #webDevelopment

#tinyCSStip As I just saw this in a '24 tutorial to make an absolutely positioned pseudo extend `8px` outside its parent in all directions.

❌ DON'T 🙀
width: 100%; height: 100%;
left: 50%; top: 50%;
translate: -50% -50%;
padding: 8px

✅ DO 😼 (1 declaration, not 6)
inset: -8px

Notes:
✨ yes, there are still valid use cases for `position: absolute` pseudos instead of `grid`
✨ no, that `padding` wasn't relevant later

#css #cssTrick #cssTip #code #coding #frontend #web #webDev #dev #webDevelopment

#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!

Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa

The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes

#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment

#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!

Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa

The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes

#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment

#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!

Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa

The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes

#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment

#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!

Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa

The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes

#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment

#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!

Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa

The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes

#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment

#tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.

Pure #CSS #halftone effect in 3 declarations:

✨ background layering a pattern and a map
✨ blend mode multiplication of the two layers
✨ contrast bump up to push all greys to either black or white

#cssFilter #filter #cssTricks #cssTip #cssTips #tipsAndTricks #code #coding #frontend #wedDev #webDevelpment

I used `:has` and `:checked` to create conditional styles, no JS required.

Blog post at https://goulet.dev/posts/conditional-styles-with-has/

#csstip #webdev

I used `:has` and `:checked` to create conditional styles, no JS required.

Blog post at https://goulet.dev/posts/conditional-styles-with-has/

#csstip #webdev

I used `:has` and `:checked` to create conditional styles, no JS required.

Blog post at https://goulet.dev/posts/conditional-styles-with-has/

#csstip #webdev

Basic #tinyCSStip.💡

So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!

#css #code #cssTip #cssTips #cssTricks #coding #frontend #webDev #webDevelopment #cssBasics

Basic #tinyCSStip.💡

So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!

#css #code #cssTip #cssTips #cssTricks #coding #frontend #webDev #webDevelopment #cssBasics

Basic #tinyCSStip.💡

So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!

#css #code #cssTip #cssTips #cssTricks #coding #frontend #webDev #webDevelopment #cssBasics

Basic #tinyCSStip.💡

So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!

#css #code #cssTip #cssTips #cssTricks #coding #frontend #webDev #webDevelopment #cssBasics

Basic #tinyCSStip.💡

So you have a responsive, flexible `width` rectangular box with `aspect-ratio: 2` and want to turn it into a half disc?

Use a `50%` horizontal `border-radius` and a vertical one that's `100%` for the top corners (first two listed) and `0` for the other two!

#css #code #cssTip #cssTips #cssTricks #coding #frontend #webDev #webDevelopment #cssBasics

📐CSS media query debugger

Ooh, I don't think I shared this one before. Open on any device to see its type, features, and other characteristics.

https://reinier.nz/experiments/media-query-debugger

#CSS #WebDevelopment #CSSTip

#CSSTip: Create variations of a color before Relative Color Syntax is implemented, with color-mix() and the `none` keyword:
https://codepen.io/leaverou/pen/gOZZQZb?editors=1100

There I only vary (oklch) lightness, but you can do the same thing for any component of any color function — or even alpha.

#CSSTip: Create variations of a color before Relative Color Syntax is implemented, with color-mix() and the `none` keyword:
https://codepen.io/leaverou/pen/gOZZQZb?editors=1100

There I only vary (oklch) lightness, but you can do the same thing for any component of any color function — or even alpha.

#CSSTip: Create variations of a color before Relative Color Syntax is implemented, with color-mix() and the `none` keyword:
https://codepen.io/leaverou/pen/gOZZQZb?editors=1100

There I only vary (oklch) lightness, but you can do the same thing for any component of any color function — or even alpha.

#CSSTip: Create variations of a color before Relative Color Syntax is implemented, with color-mix() and the `none` keyword:
https://codepen.io/leaverou/pen/gOZZQZb?editors=1100

There I only vary (oklch) lightness, but you can do the same thing for any component of any color function — or even alpha.

#CSSTip: Create variations of a color before Relative Color Syntax is implemented, with color-mix() and the `none` keyword:
https://codepen.io/leaverou/pen/gOZZQZb?editors=1100

There I only vary (oklch) lightness, but you can do the same thing for any component of any color function — or even alpha.