CSS Triggers List – What Kind of Changes You Can Make

Layout
Paint
Composite

align-content

Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


align-items

Changing align-items alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


align-self

Changing align-self alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


backface-visibility

Changing backface-visibility does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-attachment

Changing background-attachment does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-blend-mode

Changing background-blend-mode does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-clip

Changing background-clip does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-color

Changing background-color does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-image

Changing background-image does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-origin

Changing background-origin does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-position

Changing background-position does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-repeat

Changing background-repeat does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


background-size

Changing background-size does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-bottom-color

Changing border-bottom-color does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-bottom-left-radius

Changing border-bottom-left-radius does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-bottom-right-radius

Changing border-bottom-right-radius does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-bottom-style

Changing border-bottom-style alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 

 


border-bottom-width

Changing border-bottom-width alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 

 

 


border-collapse

Changing border-collapse alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


border-image-outset

Changing border-image-outset does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-image-repeat

Changing border-image-outset does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-image-slice

Changing border-image-slice does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-image-source

Changing border-image-source alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


border-image-width

Changing border-image-width does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-left-color

Changing border-left-color does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-left-style

border-left-styleChanging border-left-style alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


border-left-width

Changing border-left-width alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


border-right-color

Changing border-right-color does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 


border-right-style

Changing border-right-style alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


border-right-width

border-right-widthChanging border-right-width alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


border-top-color

border-top-color cssChanging border-top-color does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-top-left-radius

border-top-left-radiusChanging border-top-left-radius does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-top-right-radius

Changing border-top-right-radius does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.

Once any pixels have been painted the page will be composited together.

 

 


border-top-style

border-top-styleChanging border-top-style alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


border-top-width

border-top-widthChanging border-top-width alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 

 


bottom

bottom cssChanging bottom alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


box-shadow

box-shadow cssChanging box-shadow alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 


box-sizing

box-sizing cssChanging box-sizing alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.