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 CSS background. 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 giá trị này 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ủ đặc tả kỹ thuật và phù hợp với hành vi của Firefox, Opera và Internet Explorer.

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

Cách làm việc 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 nên 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 cú pháp viết tắt background yêu cầu phải chỉ định position (0%) trước, sau đó là dấu gạch chéo lên rồi mới đến background-size (50px 40px).

Bản sửa lỗi dành cho mã hiện có

Sau đây là một số lựa chọn có thể 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 so với mọi quy tắc CSS khác đặt background cho phần tử đó, và đừng quên kiểm tra các 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: độ lệch của 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 đối từ góc trên cùng bên trái, giờ đây, bạn có thể chỉ định độ lệch so với các cạnh của vùng chứa. Ví dụ: khi thiết lập background-position: right 5px bottom 5px;, hình ảnh sẽ được đặt cách cạnh phải 5 px và cách cuối 5 px. Xem mẫu này trên JSBin