Register new properties
Assembler CSS allows you to register new properties that are not part of the default supported
property list. Defining a new property is done by defining a CSS variable having the same name as the property you want
to register, suffixed with the word --register. The value of the variable must be set to true.
For example, registering the writing-mode property would look like below.
:root {
--writing-mode--register: true;
}
Once declared, you can use the newly registered property like any other Assembler property.
Hello World
<div x-style="writing-mode:vertical-lr; ...">
Hello World
</div>
Some CSS properties are supported on different browsers only with a prefix like -moz, or -webkit.
You can declare all these variations across browsers as the value of the custom CSS property.
:root {
--foo--register: -webkit-foo, -moz-foo;
--bar--register: -webkit-bar;
}
Supported properties
Below is the full list of supported Assembler properties.
| Assembler property | CSS mapping |
|---|---|
| align-content |
align-content: var(--asm-align-content) !important;
|
| align-items |
align-items: var(--asm-align-items) !important;
|
| align-self |
align-self: var(--asm-align-self) !important;
|
| animation |
-webkit-animation: var(--asm-animation) !important;
animation: var(--asm-animation) !important;
|
| appearance |
-webkit-appearance: var(--asm-appearance) !important;
-moz-appearance: var(--asm-appearance) !important;
appearance: var(--asm-appearance) !important;
|
| backdrop-filter |
-webkit-backdrop-filter: var(--asm-backdrop-filter) !important;
backdrop-filter: var(--asm-backdrop-filter) !important;
|
| backface-visibility |
backface-visibility: var(--asm-backface-visibility) !important;
|
| background |
background: var(--asm-background) !important;
|
| background-attachment |
background-attachment: var(--asm-background-attachment) !important;
|
| background-blend-mode |
background-blend-mode: var(--asm-background-blend-mode) !important;
|
| background-clip |
-webkit-background-clip: var(--asm-background-clip) !important;
-moz-background-clip: var(--asm-background-clip) !important;
background-clip: var(--asm-background-clip) !important;
|
| background-color |
background-color: var(--asm-background-color) !important;
|
| background-image |
background-image: var(--asm-background-image) !important;
|
| background-position |
background-position: var(--asm-background-position) !important;
|
| background-repeat |
background-repeat: var(--asm-background-repeat) !important;
|
| background-size |
background-size: var(--asm-background-size) !important;
|
| border |
border: var(--asm-border) !important;
|
| border-bottom |
border-bottom: var(--asm-border-bottom) !important;
|
| border-bottom-color |
border-bottom-color: var(--asm-border-bottom-color) !important;
|
| border-bottom-left-radius |
border-bottom-left-radius: var(--asm-border-bottom-left-radius) !important;
|
| border-bottom-right-radius |
border-bottom-right-radius: var(--asm-border-bottom-right-radius) !important;
|
| border-bottom-style |
border-bottom-style: var(--asm-border-bottom-style) !important;
|
| border-bottom-width |
border-bottom-width: var(--asm-border-bottom-width) !important;
|
| border-collapse |
border-collapse: var(--asm-border-collapse) !important;
|
| border-color |
border-color: var(--asm-border-color) !important;
|
| border-left |
border-left: var(--asm-border-left) !important;
|
| border-left-color |
border-left-color: var(--asm-border-left-color) !important;
|
| border-left-style |
border-left-style: var(--asm-border-left-style) !important;
|
| border-left-width |
border-left-width: var(--asm-border-left-width) !important;
|
| border-radius |
border-radius: var(--asm-border-radius) !important;
|
| border-right |
border-right: var(--asm-border-right) !important;
|
| border-right-color |
border-right-color: var(--asm-border-right-color) !important;
|
| border-right-style |
border-right-style: var(--asm-border-right-style) !important;
|
| border-right-width |
border-right-width: var(--asm-border-right-width) !important;
|
| border-style |
border-style: var(--asm-border-style) !important;
|
| border-top |
border-top: var(--asm-border-top) !important;
|
| border-top-color |
border-top-color: var(--asm-border-top-color) !important;
|
| border-top-left-radius |
border-top-left-radius: var(--asm-border-top-left-radius) !important;
|
| border-top-right-radius |
border-top-right-radius: var(--asm-border-top-right-radius) !important;
|
| border-top-style |
border-top-style: var(--asm-border-top-style) !important;
|
| border-top-width |
border-top-width: var(--asm-border-top-width) !important;
|
| border-width |
border-width: var(--asm-border-width) !important;
|
| bottom |
bottom: var(--asm-bottom) !important;
|
| box-orient |
-webkit-box-orient: var(--asm-box-orient) !important;
box-orient: var(--asm-box-orient) !important;
|
| box-shadow |
box-shadow: var(--asm-box-shadow) !important;
|
| box-sizing |
box-sizing: var(--asm-box-sizing) !important;
|
| clear |
clear: var(--asm-clear) !important;
|
| clip |
clip: var(--asm-clip) !important;
|
| clip-path |
clip-path: var(--asm-clip-path) !important;
|
| color |
color: var(--asm-color) !important;
|
| column-gap |
-moz-column-gap: var(--asm-column-gap) !important;
column-gap: var(--asm-column-gap) !important;
|
| content |
content: var(--asm-content) !important;
|
| cursor |
cursor: var(--asm-cursor) !important;
|
| display |
display: var(--asm-display) !important;
|
| filter |
filter: var(--asm-filter) !important;
|
| flex |
flex: var(--asm-flex) !important;
|
| flex-basis |
flex-basis: var(--asm-flex-basis) !important;
|
| flex-direction |
flex-direction: var(--asm-flex-direction) !important;
|
| flex-flow |
flex-flow: var(--asm-flex-flow) !important;
|
| flex-grow |
flex-grow: var(--asm-flex-grow) !important;
|
| flex-shrink |
flex-shrink: var(--asm-flex-shrink) !important;
|
| flex-wrap |
flex-wrap: var(--asm-flex-wrap) !important;
|
| float |
float: var(--asm-float) !important;
|
| font-family |
font-family: var(--asm-font-family) !important;
|
| font-size |
font-size: var(--asm-font-size) !important;
|
| font-style |
font-style: var(--asm-font-style) !important;
|
| font-variant-numeric |
font-variant-numeric: var(--asm-font-variant-numeric) !important;
|
| font-weight |
font-weight: var(--asm-font-weight) !important;
|
| gap |
gap: var(--asm-gap) !important;
|
| grid |
grid: var(--asm-grid) !important;
|
| grid-area |
grid-area: var(--asm-grid-area) !important;
|
| grid-auto-columns |
grid-auto-columns: var(--asm-grid-auto-columns) !important;
|
| grid-auto-flow |
grid-auto-flow: var(--asm-grid-auto-flow) !important;
|
| grid-auto-rows |
grid-auto-rows: var(--asm-grid-auto-rows) !important;
|
| grid-column |
grid-column: var(--asm-grid-column) !important;
|
| grid-column-end |
grid-column-end: var(--asm-grid-column-end) !important;
|
| grid-column-start |
grid-column-start: var(--asm-grid-column-start) !important;
|
| grid-row |
grid-row: var(--asm-grid-row) !important;
|
| grid-row-end |
grid-row-end: var(--asm-grid-row-end) !important;
|
| grid-row-start |
grid-row-start: var(--asm-grid-row-start) !important;
|
| grid-template |
grid-template: var(--asm-grid-template) !important;
|
| grid-template-areas |
grid-template-areas: var(--asm-grid-template-areas) !important;
|
| grid-template-columns |
grid-template-columns: var(--asm-grid-template-columns) !important;
|
| grid-template-rows |
grid-template-rows: var(--asm-grid-template-rows) !important;
|
| height |
height: var(--asm-height) !important;
|
| isolation |
isolation: var(--asm-isolation) !important;
|
| justify-content |
justify-content: var(--asm-justify-content) !important;
|
| justify-items |
justify-items: var(--asm-justify-items) !important;
|
| justify-self |
justify-self: var(--asm-justify-self) !important;
|
| left |
left: var(--asm-left) !important;
|
| letter-spacing |
letter-spacing: var(--asm-letter-spacing) !important;
|
| line-break |
line-break: var(--asm-line-break) !important;
|
| line-clamp |
-webkit-line-clamp: var(--asm-line-clamp) !important;
line-clamp: var(--asm-line-clamp) !important;
|
| line-height |
line-height: var(--asm-line-height) !important;
|
| list-style-position |
list-style-position: var(--asm-list-style-position) !important;
|
| list-style-type |
list-style-type: var(--asm-list-style-type) !important;
|
| margin |
margin: var(--asm-margin) !important;
|
| margin-bottom |
margin-bottom: var(--asm-margin-bottom) !important;
|
| margin-left |
margin-left: var(--asm-margin-left) !important;
|
| margin-right |
margin-right: var(--asm-margin-right) !important;
|
| margin-top |
margin-top: var(--asm-margin-top) !important;
|
| max-height |
max-height: var(--asm-max-height) !important;
|
| max-width |
max-width: var(--asm-max-width) !important;
|
| min-height |
min-height: var(--asm-min-height) !important;
|
| min-width |
min-width: var(--asm-min-width) !important;
|
| object-fit |
object-fit: var(--asm-object-fit) !important;
|
| object-position |
object-position: var(--asm-object-position) !important;
|
| opacity |
opacity: var(--asm-opacity) !important;
|
| order |
order: var(--asm-order) !important;
|
| outline |
outline: var(--asm-outline) !important;
|
| outline-offset |
outline-offset: var(--asm-outline-offset) !important;
|
| overflow |
overflow: var(--asm-overflow) !important;
|
| overflow-wrap |
overflow-wrap: var(--asm-overflow-wrap) !important;
|
| overflow-x |
overflow-x: var(--asm-overflow-x) !important;
|
| overflow-y |
overflow-y: var(--asm-overflow-y) !important;
|
| overscroll-behavior |
overscroll-behavior: var(--asm-overscroll-behavior) !important;
|
| overscroll-behavior-x |
overscroll-behavior-x: var(--asm-overscroll-behavior-x) !important;
|
| overscroll-behavior-y |
overscroll-behavior-y: var(--asm-overscroll-behavior-y) !important;
|
| padding |
padding: var(--asm-padding) !important;
|
| padding-bottom |
padding-bottom: var(--asm-padding-bottom) !important;
|
| padding-left |
padding-left: var(--asm-padding-left) !important;
|
| padding-right |
padding-right: var(--asm-padding-right) !important;
|
| padding-top |
padding-top: var(--asm-padding-top) !important;
|
| perspective |
perspective: var(--asm-perspective) !important;
|
| perspective-origin |
perspective-origin: var(--asm-perspective-origin) !important;
|
| place-content |
place-content: var(--asm-place-content) !important;
|
| place-items |
place-items: var(--asm-place-items) !important;
|
| place-self |
place-self: var(--asm-place-self) !important;
|
| pointer-events |
pointer-events: var(--asm-pointer-events) !important;
|
| position |
position: var(--asm-position) !important;
|
| resize |
resize: var(--asm-resize) !important;
|
| right |
right: var(--asm-right) !important;
|
| row-gap |
row-gap: var(--asm-row-gap) !important;
|
| table-layout |
table-layout: var(--asm-table-layout) !important;
|
| text-align |
text-align: var(--asm-text-align) !important;
|
| text-decoration |
text-decoration: var(--asm-text-decoration) !important;
|
| text-decoration-style |
text-decoration-style: var(--asm-text-decoration-style) !important;
|
| text-fill-color |
-webkit-text-fill-color: var(--asm-text-fill-color) !important;
-moz-text-fill-color: var(--asm-text-fill-color) !important;
text-fill-color: var(--asm-text-fill-color) !important;
|
| text-overflow |
text-overflow: var(--asm-text-overflow) !important;
|
| text-shadow |
text-shadow: var(--asm-text-shadow) !important;
|
| text-transform |
text-transform: var(--asm-text-transform) !important;
|
| top |
top: var(--asm-top) !important;
|
| transform |
transform: var(--asm-transform) !important;
|
| transform-box |
transform-box: var(--asm-transform-box) !important;
|
| transform-origin |
transform-origin: var(--asm-transform-origin) !important;
|
| transform-style |
transform-style: var(--asm-transform-style) !important;
|
| transition |
transition: var(--asm-transition) !important;
|
| user-select |
-webkit-user-select: var(--asm-user-select) !important;
-moz-user-select: var(--asm-user-select) !important;
user-select: var(--asm-user-select) !important;
|
| vertical-align |
vertical-align: var(--asm-vertical-align) !important;
|
| visibility |
visibility: var(--asm-visibility) !important;
|
| white-space |
white-space: var(--asm-white-space) !important;
|
| width |
width: var(--asm-width) !important;
|
| word-break |
word-break: var(--asm-word-break) !important;
|
| z-index |
z-index: var(--asm-z-index) !important;
|
