Viết tắt Nền CSS sắp ra mắt trên các trình duyệt WebKit trên thiết bị di động

Pete LePage

Đầu năm nay, WebKit đã cập nhật hành vi của thuộc tính viết tắt background CSS. Với thay đổi này, thuộc tính viết tắt background sẽ đặt lại background-size về giá trị mặc định là auto auto nếu không được đặt trong phần khai báo viết tắt. Thay đổi này giúp Chrome và các trình duyệt WebKit khác tuân thủ thông số kỹ thuật và khớp với hành vi của Firefox, Opera và Internet Explorer.

Chrome dành cho Android đang chuyển sang các bản sửa đổi hiện tại trên WebKit, nên thay đổi này hiện đang được triển khai trên Android. Vì đây là bản sửa lỗi cho webkit, nên các trang web được kiểm thử trong nhiều trình duyệt có thể sẽ không bị ảnh hưởng.

Cách làm cũ

// background-size is reset to auto auto by the background shorthand
.foo {
    background-size: 50px 40px;
    background: url(foo.png) no-repeat;
}

Thuộc tính viết tắt background không chứa bất kỳ thuộc tính kích thước nào và do đó sẽ đặt lại background-size về giá trị mặc định là auto auto.

Cách chính xác để chỉ định kích thước hình ảnh

// background-size is specified after background
.fooA {
    background: url(foo.png) no-repeat;
    background-size: 50px 40px;
}

// background-size is specified inline after position
.fooB {
    background: url(foo.png) 0% / 50px 40px no-repeat;
}

Trong fooB, việc chỉ định background-size trong viết tắt background yêu cầu phải chỉ định position (0%) trước, theo sau là dấu gạch chéo rồi đến background-size (50px 40px).

Sửa lỗi cho mã hiện có

Có một số cách giúp bạn dễ dàng khắc phục vấn đề này:

• Sử dụng background-image thay vì thuộc tính viết tắt background.
• Đặt background-size ở cuối cùng, với mức độ cụ thể cao hơn bất kỳ quy tắc CSS nào khác đặt background trên phần tử đó và đừng quên kiểm tra và quy tắc :hover.
• Áp dụng thuộc tính !important cho background-size.
• Di chuyển thông tin về kích thước sang thuộc tính viết tắt background.

Bật mí thêm cho bạn: độ dời hình nền

Ngoài thay đổi này, giờ đây, bạn có thể linh hoạt hơn trong việc định vị hình ảnh trong nền. Trước đây, bạn chỉ có thể chỉ định vị trí hình ảnh tương ứng với góc trên cùng bên trái, giờ đây, bạn có thể chỉ định độ dời so với các cạnh của vùng chứa. Ví dụ: khi đặt background-position: right 5px bottom 5px;, hình ảnh sẽ được đặt cách cạnh phải 5px và cách cuối 5px. Hãy xem mẫu này trên JSBin