디자인 된 <select />에 placeholder 개념이 있어서 어떻게 하면 좋을지 찾아봤다. 간략하게 설명하자면 선택이 불가능하게 disabled 추가하고 hidden으로 숨김 마지막으로 selected로 디폴트값을 처리하면 완성.

function Select({ placeholder, children }) {
  return (
    <select>
      <option value="" disabled hidden selected>
        {placeholder}
      </option>
      {children}
    </select>
  )
}
#html#select
#132

html

<head />

구조화된 데이터

lang

favicon

Microdata

attributes

Footnotes

  1. 다양한 관점에서 파비콘을 분석한 글 ↩

#html
#143

자동완성 기능은 편리할수도 있지만 비활성화가 필요한 경우도 있다. 하지만 chrome에서 무시되는 경우가 있는데…이게 거의 된다 지금은 안된다…되는 것 같다…이렇게 변질이 되는 것 같다.

Footnotes

  1. 가끔 들어가보면 여전히 진행중이다… ↩

  2. 글쓴이는 결국 안되서 스크립트로 focus될때 readonly 속성으로 제어했다고 한다. ↩

#autofill#html
#168

파서를 멈추는 것과 paint를 멈추는 것은 다르다. 동기 <script>는 파서만 세운다. 그 위에 이미 파싱된 청크가 먼저 그려질지는 브라우저 재량이라, default 상태가 한 프레임 노출되지 않는다는 보장이 없다. blocking="render"가 그 보장을 명시적으로 만든다.

언제: 스타일이 붙기 전 default 상태가 한 프레임 새는 걸 막고 싶을 때.

절차

  1. blocking="render"를 붙인다.
  2. <body>가 열리기 전에 둔다. 컴포넌트 마크업 안이면 이미 늦다.

확인: 마크업에서 위치를 본다 — <body>보다 앞인가. 화면으로는 구분이 안 된다(아래).

함정: <body>가 생기는 순간 등록 자체가 닫힌다. 뒤에 붙인 blocking="render"는 실패하지 않고 조용한 no-op이 된다 — attribute를 모르는 브라우저에서 옛 동작으로 떨어지는 것과 같은 모양이라, 안 먹는다는 사실이 드러나지 않는다.

왜 <body>인가: 스펙은 “head 안에 둬라”라고 말하지 않는다. 대신 등록 창을 이렇게 닫는다.

A Document document allows adding render-blocking elements if document’s content type is “text/html” and the body element of document is null.

— HTML Standard

#performance#rendering#fouc#html
#567