모바일 WebKit 브라우저의 CSS background shorthand 변경 사항
Source
Evernote/Advanced View Required/CSS Background shorthand coming to mobile WebKit browsers.md
Summary
WebKit 브라우저(Chrome for Android 포함)가 CSS background shorthand 속성의 동작을 스펙에 맞게 수정했습니다. shorthand 선언에 background-size가 명시되지 않으면 기본값(auto auto)으로 초기화됩니다. 기존에 shorthand 뒤에 background-size를 별도로 선언하던 방식은 더 이상 작동하지 않을 수 있으므로, shorthand 내에 / 기호를 사용하여 크기를 명시하거나, background-size를 shorthand보다 높은 우선순위로 설정하는 등의 수정이 필요합니다. 또한 background-position에서 컨테이너 가장자리로부터의 오프셋 지정이 지원됩니다.
Key Points
- WebKit의
backgroundshorthand는 명시되지 않은background-size를auto auto로 초기화하며, 이는 Firefox 등 다른 브라우저와 호환되는 스펙 준수 변경입니다. - 기존 코드에서
backgroundshorthand 뒤에background-size를 별도로 선언하면 shorthand에 의해 값이 덮어씌워질 수 있습니다. - 해결 방법: 1)
background-image사용, 2)background-size를 shorthand보다 높은 우선순위로 설정, 3)!important사용, 4) shorthand 내에position / size형식으로 크기 명시. - 추가 기능:
background-position에서right 5px bottom 5px처럼 가장자리로부터의 오프셋 지정을 지원합니다.