CSS3 sinh ra đã khiến nghề thiết kế trang web thú vị hơn với thế giới.
Trong khi chúng ta có thể đã biết về những thuộc tính nổi bật như: box-shadow, border-radius và transfrom.
… thì vẫn có rất nhiều thuộc tính CSS3 mà bạn có thể không chưa từng nghe hay thấy, nhưng mình tin chắc bạn sẽ thấy cám ơn trời đất rất nhiều nếu biết nó tồn tại.
W3C đã làm việc liên tục để CSS luôn mới mẻ, cập nhật và hỗ trợ tốt hơn cho công việc của nhà thiết kế, lập trình viên và cả người dùng.
Bây giờ, hãy cùng mình xem 10 thuộc tính CSS3 Ẩn mà Front end DEV nên biết đến để vượt qua giai đoạn front end dễ dàng hơn
#1. Tabsize
Hầu hết các trình soạn thảo code được trang bị Tab Size control cho phép các lập trình viên chỉ định chiều rộng thụt lề được thực hiện bằng phím Tab.
Chỉ là gần đây, chúng ta mới có thể tùy chỉnh thụt lề của code được nhúng trên các trang web.
pre {
tab-size: 2;
}Lưu ý rằng mỗi trình duyệt có thể có cách hiểu riêng về đơn vị chiều rộng của tab nên dài bao nhiêu.
Vì vậy, chúng ta có thể sẽ thấy một số khác biệt giữa các trình duyệt khác nhau. Về mặt hỗ trợ trình duyệt, thuộc tính tab-size hoạt động trong Chrome, Opera, Firefox và Safari theo Caniuse.
#2. Text Rendering
Thuộc tính text-rendering sẽ cho trình duyệt biết cách hiển thị văn bản trong các trang web.
Văn bản sẽ được tối ưu hóa cho hiệu suất, mức độ dễ đọc hoặc độ chính xác, cuối cùng sẽ xác định chất lượng văn bản.
Hãy xem xét kỹ hơn về độ tinh xảo của văn bản trong ảnh chụp màn hình sau đây để so sánh giữa văn bản bình thường và text optimizedLegibility:
#3. Font Stretch
Một số phông chữ cung cấp các kiểu bổ sung ngoài các chữ thường, in đậm và in nghiêng.
Helvetica Neue hoặc Myriad Pro là một ví dụ đi kèm với các kiểu như
‘Condensed’, ‘Ultra-condensed’, và ‘Semi-condensed’.
Đây là nơi một thuộc tính mới gọi là font-stretch được giới thiệu. Nó cho phép chúng ta áp dụng những kiểu này.
Chúng ta có thể sử dụng font-stretch chữ kết hợp với thuộc tính phông chữ như, font-style. Đây là một ví dụ:
h1 {
font-style: bold;
font-stretch: ;
}Thuộc tính font-stretch hiện tại chỉ hoạt động trong Firefox và Internet Explorer 9 (trở lên).
#4. Text Overflow
Thuộc tính text-overflow chỉ định trình bày nội dung bị tràn hoặc bị cắt bởi bộ chứa của nó. Giá trị mặc định được đặt thành clip chỉ đơn giản là ẩn văn bản bị cắt bớt.
Thay vào đó, bạn có thể đặt nó thành dấu chấm lửng ngang (ellipsis) để mô tả văn bản hoặc nội dung bị cắt bớt bằng dấu chấm lửng ngang, như sau.
.content-box {
text-overflow
}Trong trường hợp này, dấu chấm lửng ngang là ba dấu chấm ở cuối thường biểu thị nội dung bị bỏ qua.
Lưu ý: Trong thiết kế web, lạm dụng dấu chấm lửng ngang nhiều cũng khiến giao diện web không được thanh lịch. Nhưng nó rất có ích trong những trường hợp cụ thể.
#5. Writing Mode
Không phải mọi ngôn ngữ được viết từ hướng trái sang phải. Thay vào đó, một vài ngôn ngữ được viết từ trên xuống dưới như tiếng Nhật hoặc từ phải sang trái như tiếng Ả Rập và tiếng Do Thái
Để phù hợp với các ngôn ngữ này, một thuộc tính mới có tên là chế độ viết (Writing mode) được giới thiệu để cho phép các lập trình viên thay đổi hướng viết nội dung thông qua CSS.
Ví dụ, đoạn mã này điều hướng luồng nội dung từ trái sang phải (bất kể ngôn ngữ).
p {
writing-mode: rl-tb;
}Để thay đổi luồng nội dung, di chuyển từ trên xuống dưới, hãy thiết lập thuộc tính writing-mode với giá trị vertical-lr:
p {
writing-mode: vertical-lr;
}#6. Point Event
Thuộc tính pointer-events cho phép chúng ta điều khiển hành vi phần tử trong các sự kiện con trỏ như kéo, di chuột và nhấp.
Sử dụng thuộc tính như trong ví dụ bên dưới, liên kết bị ảnh hưởng sẽ không làm gì khi được click. Liên kết sẽ bị vô hiệu hóa hoàn toàn và thậm chí sẽ không hướng người dùng đến địa chỉ được chỉ định trong thuộc tính href.
a {
pointer-events: none;
}Do một số vấn đề quan trọng tuy nhiên thuộc tính pointer-events bị giữ cho đến lần sửa đổi CSS tiếp theo, CSS4.
#7. Image Orientation
Trong các trình chỉnh sửa hình ảnh như Photoshop, bạn có thể thay đổi hướng hình ảnh bằng cách xoay hoặc lật hình ảnh.
Bây giờ, với CSS3, bạn hoàn toàn có thể thực hiện tương tự với hình ảnh trên các trang web thông qua một thuộc tính mới gọi là định hướng hình ảnh (image-orientation).
Dưới đây là một ví dụ về cách chúng ta có thể lật một hình ảnh theo chiều ngang bằng cách sử dụng thuộc tính này.
img {
image-orientation: flip;
}Bạn cũng có thể giữ lại hướng hình ảnh gốc bằng cách chỉ định giá trị thuộc tính cho từ hình ảnh, như vậy.
img {
image-orientation: from-image;
}#8. Image Rendering
Tương tự như thuộc tính kết xuất văn bản, kết xuất hình ảnh xác định chất lượng hình ảnh trên các trang web, đặc biệt là khi hình ảnh bị thay đổi kích thước.
Với sự ra đời của thuộc tính này xuất hiện một số giá trị mới và các trình duyệt có thông số kỹ thuật riêng trong vấn đề này.
Ví dụ, giá trị cạnh sắc nét (crisp-edges) giúp duy trì độ tương phản và ngăn các cạnh mờ của hình ảnh, hiện được dịch là -webkit-optimize-contrast trong trình duyệt Webkit và nearest-neighbor trong Internet Explorer.
img {
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;/* Webkit */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}Tuy nhiên, đây là một công nghệ thử nghiệm, vì vậy chúng ta có thể sẽ thấy có một vài thay đổi trong quá trình hoàn thiện.
#9. Columns
Thuộc tính columns cho phép các lập trình viên sắp xếp nội dung web thành các cột dễ dàng hơn nhiều.
Chúng ta thử chia nội dung thành hai cột như thế này:
.content {
columns: 2;
}Trong các trình duyệt hỗ trợ thuộc tính này – như Chrome và Safari – chúng ta sẽ thấy nội dung được sắp xếp như vậy.
Kết hợp với CSS Shape và một chút sáng tạo, bạn có thể có bố cục nội dung hấp dẫn và lôi cuốn hơn giống như những trang tạp chí chuyên nghiệp.
#10. Flex
Thuộc tính flex sinh ra nhằm mục đích làm cho việc xây dựng website responsive trở nên liền mạch hơn, giải quyết vấn đề Float tốt hơn.
Trên hết, flex khiến quá trình viết front end không còn quá khó khăn giúp bạn tiết kiệm thời gian để tập trung vào lập trình Back end.
- Tham khảo ngay: Khóa học Lập trình PHP Fullstack
Bây giờ, giả sử bạn muốn xây dựng một bố cục web bao gồm ba cột, bạn có thể có sắp xếp HTML theo cách này.
<div id="container">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>Sau đó, xây dựng chúng thành các cột bằng cách sử dụng thuộc tính flex trong CSS, như vậy.
#container {
width: 600px;
height: 300px;
display: flex;
}
#container .col {
flex: auto;
}Với việc bổ sung thêm một chút style trang trí như phông chữ và màu nền, chúng ta sẽ nhận được kết quả như sau.
Bạn có biết thuộc tính nào hữu ích trong CSS3 nữa không?
CSS3 đã nâng tầm thiết kế web, giúp các lập trình viên frontend, nhà thiết kế thoải mái sáng tạo hơn, tốn ít công sức hơn.
Còn có rất nhiều thuộc tính hữu ích trong CSS3 mà có thể bạn chưa biết. Tham khảo thêm tại đây.
Tham khảo:
1. http://dev.w3.org/csswg/css-text/#tab-size
2. http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty
3. http://dev.w3.org/csswg/css-fonts/#propdef-font-stretch
4. http://dev.w3.org/csswg/css-ui/#text-overflow
5. http://dev.w3.org/csswg/css-writing-modes/
6. http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
7. http://dev.w3.org/csswg/css-images-3/#image-orientation
8. http://dev.w3.org/csswg/css-images/#image-rendering
9. http://dev.w3.org/csswg/css-multicol/#columns
10. http://dev.w3.org/csswg/css-flexbox/#flex
