10 Snippets HTML/CSS & Experiments

Snippets

Ignore parent in boxing model

Warning: display: contents is not very well supported; use v-frag instead

<div style="display: contents"> Ignore parent in boxing model</div>

v-frag - remove from dom alternative way to allow top level statements

<div style="display: contents" v-frag> Ignore parent in boxing model</div>
remove from dom

Label with wrap

<label style="white-space: unset;">Very long text long text long text long text long text </label>

xd-form with 2 columns

<div class="xd-grid-l2" style="align-items: start;">
  <div class="xd-form">

  </div>
  <div class="xd-form">

  </div>
</div>

Form submit button outside form

<form id="myform">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" value="Update"/>

Grid align items

<div class="xd-grid-l2" style="align-items: start;">

</div>

Experiments

Things to keep track of in modern CSS. Could be used in the future.

Fully supported

• css inert - disable user interaction for section for example form
• css :has() - MDN
• css popover - MDN
• align-content:center for block layout - MDN
• color-mix - MDN
• input:user-valid - MDN
• input:user-invalid - MDN

Partially supported

• field-sizing:content - not fully supported MDN

textarea, select, input { field-sizing: content; }

Focus

Focus in dynamic pages:

Step 1 add class to input:

 <input class="query-focus-handler" @focus="$event.target?.select()" type="number" step=".001" v-model.number="orderline.itemQuantity" required >

Step 2

this.tryFocus('.query-focus-handler', true);

...

mounted() {
      this.fetchData();
      this.tryFocus('.query-focus-handler')
    }