Skip to content

Commit 6060e77

Browse files
edwinmedwinm
committed
Merge with Useful but lesser known CSS features
1 parent 0f43d71 commit 6060e77

File tree

1 file changed

+20
-25
lines changed

1 file changed

+20
-25
lines changed

‎README.md

+20-25
Original file line numberDiff line numberDiff line change
@@ -519,15 +519,6 @@ div {
519519
}
520520
```
521521

522-
## Useful but lesser known CSS features
523-
524-
property | value | use
525-
--- | --- | ---
526-
touch-action | manipulation | Prevent click delay by not waiting for possible double click
527-
pointer-events | none | Make a top level element behave like it's not there
528-
object-fit | cover | Specify how an image should be shown in an `img` element
529-
user-select | none | Prevents text to be selected
530-
aspect-ratio | 9 / 16 | Specify aspect ratio of the element
531522

532523
## Use aria-label to provide "alt" for background image
533524

@@ -648,22 +639,26 @@ Example for an Atom feed:
648639

649640
Handy properties that are hard to memorize but can sometimes be very useful.
650641

651-
Property | Use | More info
652-
@layer | Organize your CSS | [MDN: @layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
653-
@container | Responsive elements | [MDN: @container](https://developer.mozilla.org/en-US/docs/Web/CSS/@container)
654-
text-underline-offset: 0.25em | Set the distance between the text and the underline | [MDN: text-underline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset)
655-
margin-block: 1lh | Set the margin for the top and bottom of an element | [MDN: margin-block](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block)
656-
margin-trim: block-start | Trim the margin of an element | [MDN: margin-trim](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim)
657-
scroll-margin-top: 2rem | Set the scroll margin for the top of an element | [MDN: scroll-margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top)
658-
overscroll-behavior: contain | Prevent overscroll effects | [MDN: overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
659-
scrollbar-gutter: stable both-edges | Set the scrollbar gutter | [MDN: scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter)
660-
width: fit-content | Set the width of an element to the width of its content | [MDN: width](https://developer.mozilla.org/en-US/docs/Web/CSS/width)
661-
display: contents | Remove the element from the document tree | [MDN: display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
662-
aspect-ratio: 16 / 9 | Set the aspect ratio of an element | [MDN: aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
663-
object-fit: cover | Specify how an image should be shown in an `img` element | [MDN: object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
664-
isolation: isolate | Prevent the element from being affected by the z-index of other elements | [MDN: isolation](https://developer.mozilla.org/en-US/docs/Web/CSS/isolation)
665-
content-visibility: hidden | Hide elements that are not visible on screen | [MDN: content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)
666-
contain: size layout paint style | Prevent the element from affecting the layout of the page | [MDN: contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
642+
| Property | Use | More info |
643+
|-------------------------------------|--------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|
644+
| @layer | Organize your CSS | [MDN: @layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) |
645+
| @container | Responsive elements | [MDN: @container](https://developer.mozilla.org/en-US/docs/Web/CSS/@container) |
646+
| text-underline-offset: 0.25em | Set the distance between the text and the underline | [MDN: text-underline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset) |
647+
| margin-block: 1lh | Set the margin for the top and bottom of an element | [MDN: margin-block](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block) |
648+
| margin-trim: block-start | Trim the margin of an element | [MDN: margin-trim](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim) |
649+
| scroll-margin-top: 2rem | Set the scroll margin for the top of an element | [MDN: scroll-margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top) |
650+
| overscroll-behavior: contain | Prevent overscroll effects | [MDN: overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) |
651+
| scrollbar-gutter: stable both-edges | Set the scrollbar gutter | [MDN: scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) |
652+
| width: fit-content | Set the width of an element to the width of its content | [MDN: width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) |
653+
| aspect-ratio: 16 / 9 | Set the aspect ratio of an element | [MDN: aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) |
654+
| object-fit: cover | Specify how an image should be shown in an `img` element | [MDN: object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) |
655+
| touch-action: manipulation | Prevent click delay by not waiting for possible double click | [MDN: touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) |
656+
| pointer-events: none | Make a top level element behave like it's not there | [MDN: pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) |
657+
| user-select: none | Prevents text to be selected | [MDN: user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) |
658+
| display: contents | Remove the element from the document tree | [MDN: display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) |
659+
| isolation: isolate | Prevent the element from being affected by the z-index of other elements | [MDN: isolation](https://developer.mozilla.org/en-US/docs/Web/CSS/isolation) |
660+
| content-visibility: hidden | Hide elements that are not visible on screen | [MDN: content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) |
661+
| contain: size layout paint style | Prevent the element from affecting the layout of the page | [MDN: contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) |
667662

668663
## Checklist
669664

0 commit comments

Comments
 (0)