CSS3 cung cấp các chức năng mới hỗ trợ giao diện người dùng với các thuộc tính resize, outline-offset, box-sizing.

Trình duyệt hỗ trợ:

  Chrome IE/Edge Firefox Safari Opera
resize 4.0+ Không hỗ trợ 5.0+
4.0 -moz-		 4.0+ 15.0+
outline-offset 4.0+ Không hỗ trợ 5.0+
4.0 -moz-		 4.0+ 9.5+
box-sizing 10.0+
4.0 -webkit-		 8.0+ 29.0+
2.0 -moz-		 5.1+
3.1 -webkit-		 9.5+

Các trình duyệt có sử dụng tiền tố (prefix) như –webkit-,  -moz-. Các số đứng trước các tiền tố là phiên bản bắt đầu của trình duyệt có sử dụng tiền tố, ví dụ trong Chrome và thuộc tính box-sizing có 4.0-webkit- nghĩa là kể từ phiên bản Chrome 4.0 sử dụng  –webkit-box-sizing.

resize

Thuộc tính resize cho phép một phần tử có thể thay đổi lại kích thước. Ví dụ sau đây cho phép phần tử div thay đổi kích thước theo chiều ngang (width):


div {

resize: horizontal;

overflow: auto;

}

outline-offset

outline là đoạn thẳng được vẽ xung quanh một phần tử, bên ngoài khung viền (border). Thuộc tính outline-offset tạo khoảng cách giữa outline và border. Ví dụ sau đây vẽ outline – màu đỏ và border – màu đen cho phần tử div với khoảng cách giữa outline và border là 15px:


div {

border: 1px solid black;

outline: 1px solid red;

outline-offset: 15px;

}

Kết quả trông như sau:

(Tham khảo thêm về thuộc tính resize và outline-offset tại https://www.w3schools.com/css/css3_user_interface.asp )

box-sizing

Thuộc tính box-sizing cho phép gộp padding và border vào trong tổng width và height của một phần tử.

Ví dụ khi không dùng box-sizing:


.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

}

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

}

Kết quả:

Dùng box-sizing


.div1 {

width: 300px;

height: 100px;

border: 1px solid blue;

box-sizing: border-box;

}

.div2 {

width: 300px;

height: 100px;

padding: 50px;

border: 1px solid red;

box-sizing: border-box;

}

Kết quả:

(Tham khảo thêm về box-sizing tại

https://www.w3schools.com/css/css3_box-sizing.asp )

Flexbox

Flexible boxes hay flexbox là mô hình layout mới trong CSS3. Với flexbox, chúng ta có thể điều chỉnh ứng xử của các phần tử khi trang web phải hiển thị trên những màn hình khác nhau.

Trình duyệt hỗ trợ flexbox:

  Chrome IE/Edge Firefox Safari Opera
Flexbox một hàng 29.0+
21.0 -webkit-		 11.0+ 22.0+
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
Flexbox nhiều hàng 29.0+
21.0 -webkit-		 11.0+ 28.0+ 6.1 -webkit- 17.0+
15.0 -webkit-
12.1

Các trình duyệt có sử dụng tiền tố (prefix) như –webkit-,  -moz-. Các số đứng trước các tiền tố là phiên bản bắt đầu của trình duyệt có sử dụng tiền tố, ví dụ trong Chrome có 21.0-webkit- nghĩa là kể từ phiên bản Chrome 21.0 sử dụng  -webkit-.

(Tham khảo chi tiết về flexbox tại https://www.w3schools.com/css/css3_flexbox.asp )

Học HTML & CSS >