Wener Site

HTML FAQ

约 1 分钟阅读
标签：FAQ

double form submit

响应式

html
<meta name="viewport" content="width=device-width, initial-scale=1" />
  • width - 设置宽度
    • 支持数字 - 单位 px
    • device-width=100vw,100%
  • height
    • device-height
  • initial-scale=1
  • minimum-scale=0.1
  • maximum-scale=10
  • user-scalable=1
    • 0/1, yes/no

offscreen

  • dom inert attribute
    • accessibility 优化
    • 性能优化
    • polyfill wicg-inert
    • Temporarily offscreen/hidden content
    • On-screen but non-interactive content - pointer-events: none，user-select: none
    • jsx inert={i !== tab ? '' : null}
  • 参考
TSX
const TabContainer = () => {
  // 非当前 tab inert 并隐藏
  return (
    <div className='[&>[inert]]:hidden'>
      {Tabs.map(({ content }, i) => (
        <div key={i} inert={i !== tab ? '' : null}>
          {content}
        </div>
      ))}
    </div>
  );
};

inert.d.ts

TypeScript
declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    inert?: any;
  }
}

nested form

  • form 不允许嵌套
text
<form> cannot appear as a descendant of <form>

dialog vs popover

  • popover
    • 在 顶层
  • dialog
    • 不在 顶层

响应式图片

  • img
    • srcset
  • picture
    • source

next/image

html
<img
  alt=""
  loading="lazy"
  width="350"
  height="280"
  decoding="async"
  data-nimg="1"
  class="h-full w-full object-cover md:w-[354px]"
  srcset="/_next/image?url=%2Fimg1&amp;w=384&amp;q=75 1x, /_next/image?url=%2Fimg1&amp;w=750&amp;q=75 2x"
  src="/_next/image?url=%2Fimg1&amp;w=750&amp;q=75"
  style="color: transparent;"
/>

关联信息

反向链接和本文引用的外部资料。

References

GitHub

3 条

其他外链

4 条
最近更新commit 906e816Edit

HTML

Previous Page

Popover

Next Page

On this page

HTML FAQdouble form submit响应式offscreennested formdialog vs popover响应式图片