브라우저 차이

  • 디스플레이와 고수하는 것이 다르다.
  • 페이지가 동작하는 것을 확신하는 책임은 나한테 있다.

Handing Stylistic Differences

  • 브라우저 차이를 없애는 가장 쉬운 방법은 default style sheet를 사용하는 것
  • default style sheet는 페이지에서 모든 값을 리셋
  • 그러면 페이지가 못생겨짐

Handing Unsupported Properties

  • 브라우저들이 HTML5 태그, CSS 속성을 전혀 지원하지 않는 건 아님
  • 브라우저는 지원하지 않는 옵션을 다루기 위해 quick fix를 제공한다.

Browser Prefixes

  • -webkit- : Android, Chrome, iOS, Safari
  • -moz- : Firfox
  • -ms- : Internet Explorer
  • -o- : Opera

Often Unsupported Properties

  • column-count
  • border-radius
  • gradient
  • prefix 사용이 필요할 때 알려주는 사이트 – https://caniuse.com/

자동으로 Prefix를 포함하는 방법

직접 prefix를 추가했으나 자동으로 하는 방법이 있다

  • Editor add-on
  • 동적으로 추가해주는 다른 프로그램 사용

Review

  • Default style sheet는 스타일적인 차이를 제거한다.
    • external 방법을 사용해야 한다.
      internal 을 사용하면 override 되서 적용 안될 수 있다.
  • 브라우저 prefix는 지원하지 않은 옵션에 의해 발생되는 차이를 제거하는데 도움이 된다.
    • 납용하면 안된다.

공부 위치 – https://www.coursera.org/learn/introcss/lecture/rlS0y/02-05-browser-capabilites