Cross Browsing?

모든 브라우저에서 동일하게 의도한 대로 동작하게 하는 작업

브라우저간 렌더링 엔진이 다른 경우가 있어서 같은 코드가 동일하게 동작하지 않을 수 있다.

<aside> 💡 렌더링 엔진 HTML, CSS, XML 등을 읽어들여 사람이 읽을 수 있는 문서로 표시하는 소프트웨어 Safari → Webkit, Chrome → Blink, Firefox → Gecko

</aside>

발단

input[type=color], input[type=range]를 스타일링할 때 파이어폭스에서 스타일이 적용 안되는 이슈!

→ 표준 pseudo element가 없어서 -webkit-color-swatch, -webkit-slider-thumb과 같은 비표준 pseudo element를 사용해서 발생

다른 브라우저에서 지원하는 비표준 pseudo element를 사용해서 동일한 스타일 적용

같은 기능인데 이름이 다른 경우도 존재

→ -moz-range-thumb -webkit-slider-thumb