Open31

Visually Hidden スタイル比較

yamanokuyamanoku

Bootstrap

https://getbootstrap.jp/docs/5.0/helpers/visually-hidden/

    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
yamanokuyamanoku

Reach UI

https://reach.tech/visually-hidden/

border: 0;
clip: rect(0 0 0 0);
width: "1px",
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
/* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
white-space: nowrap;
word-wrap: normal;
yamanokuyamanoku

Nord Design System

https://nordhealth.design/components/visually-hidden/

    all: initial;
    inset-block-start: 0px;
    clip: rect(1px, 1px, 1px, 1px) !important;
    block-size: 1px !important;
    position: absolute !important;
    inline-size: 1px !important;
    border-width: 0px !important;
    border-style: initial !important;
    border-color: initial !important;
    border-image: initial !important;
    overflow: hidden !important;
    padding: 0px !important;