Trang chủ Lập trình Javascript - HTML 8 thuộc tính ít được biết đến trong CSS

8 thuộc tính ít được biết đến trong CSS

CSS đã ra đời vào từ rất lâu – khoảng từ năm 1994 – và nó đã trở thành tiêu chuẩn cho bố cục của các trang web. Các thông số kỹ thuật mới (CSS4) tiếp tục bổ sung chức năng mới mẻ với các hiệu ứng animation (hoạt hình), transforms, box shadow (bóng) là một trong những kiến thức mới và nó thật sự là lựa chọn là hoàn hảo. Có thể bạn là người thường xuyên sử dụng CSS nhưng có thể những thuộc tính được chia sẻ dưới đây có thể bạn chưa từng biết đến.

Với tất cả những hấp dẫn trong thế giới của CSS, đôi khi nó là hấp dẫn để đi sâu vào tìm hiểu các kỹ thuật mới hơn là tìm hiểu sâu các kỹ thuật đã có trước đó và dĩ nhiên là sẽ có những thuộc tính bị bỏ qua trong kỹ thuật CSS mà những thuộc tính này cung cấp một số chức năng rất tiện dụng. Cùng tìm hiểu thêm nhé.

1. CSS calc()

Calc() có lẽ là phổ biến nhất được sử dụng trong các thông sô được liệt kê ở đây. Nó đáng được nhắc đến. Nếu bạn chưa bao giờ sử dụng nó thì hãy nhớ đến nó khi có nhu cầu: trừ bao nhiêu pixel cho chiều rộng của thành phần này.

Kích thước được sử dụng hoàn toàn tự nhiên vì sử dụng kích thước thật của trình duyệt trước khi tình toán.

Như ở trên ví dụ thì yếu tố .box trên sẽ là 100% độ rộng trừ  đi 20px. Thông số này có thể được sử dụng cho nhiều mục đích như việc đưa các thành phần cố định chiều rộng cùng với những yếu tố có độ rộng tùy biến.

2. The pointer media query

Trong khi không được hỗ trợ cũng như tôi muốn (~ 70%), truy vấn con trỏ phương tiện truyền thông có thể cực kỳ hữu ích. Hầu hết thời gian, các truy vấn phương tiện truyền thông đều dựa trên một phương pháp đơn giản: chiều rộng của cửa sổ trình duyệt. Nhưng có nhiều trường hợp khi chúng ta thà yêu cầu trình duyệt, “là người này sử dụng ngón tay của họ hoặc một con chuột?” Vì vậy chúng tôi có thể điều chỉnh kích thước nút của chúng tôi phù hợp.

None

Các cơ chế đầu vào chính của thiết bị không bao gồm một thiết bị trỏ.

Coarse

Các cơ chế đầu vào chính của thiết bị bao gồm một thiết bị trỏ chính xác hạn chế. Ví dụ như màn hình cảm ứng và cảm biến chuyển động phát hiện

Fine

Các cơ chế đầu vào chính của thiết bị bao gồm một thiết bị trỏ chính xác. Các ví dụ bao gồm chuột, touchpad, và styluses vẽ.

Support: Nó chưa phải là tốt, nhưng đang trở nên hoàn thiện hơn. đã hỗ trợ webkit, blink. Edge v..v…

3. The currentColor variable

Giới thiệu với CSS3, biến currentColor có nguồn gốc CSS và đại diện, một cách dễ dàng, giá trị ”màu sắc” của phần tử hiện tại.

4. The :valid, :invalid, and :empty pseudo classes

The :valid and :invalid pseudo classes được dùng để style validate các form input. Hầu hết ô input mới có khả năng dùng được thuộc tính valid và invalid. Và đã hỗ trợ hầu các trình duyệt.

5. Counters using only CSS

Nhu cầu tạo list danh mục nhưng ko dử dụng<ol>elements? hoặc không muốn sử dụng javascript, ko cần lo lắng, chúng ta có thể sử dụng CSS counters.

Đôi khi CSS có vẻ vô lý. Đây là một trong những thời điểm. Không có biểu tượng cần thiết cho nối – chỉ cần ném một không gian trong đó.

6. Predictable tables with fixed layout

Tables, giá trị mặc định, trả rất nhiều sự chú ý đến nội dung của ô bảng của họ trong việc quyết định làm thế nào độ rộng sẽ được hiển thị. Thêm table-layout:fixed các bảng hiển thị một cách dễ quản lý hơn.

7. Easy form states using adjacent sibling selectors

Các anh chị em chọn liền kề là CSS rất cơ bản. Đó là một phần của tất cả các hướng dẫn người mới bắt đầu ra khỏi đó, nhưng nó không được sử dụng gần như đủ. Bằng cách tận dụng chọn này, nó đơn giản để làm nút trạng thái hoặc tin nhắn xác nhận hình thức xuất hiện khi cần thiết mà không cần javascript.

8. Algebraic nth-child() selection

Nth-child selectors rất tuyệt để xoá border của một phần tử nào đó trong list hoặc dòng nào đó trong một bảng. Nhưng đó chỉ là 1 phần của thuộc tính này, và nó rất hữu dụng ở những mục khác nhau.

Ví dụ chọn tất cả các phần tử thứ 4, bắt đầu từ 1.

Theo Viblo

- Advertisement -
Huỳnh Mai Anh Kiệthttps://anhkiet.biz
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên cho Hura Apps - một startup nhỏ về công nghệ tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

10 Công Cụ Có Thể Thay Thế ChatGPT

ChatGPT là một mô hình ngôn ngữ lớn được phát triển bởi OpenAI. Nó cung cấp các câu trả lời nhanh chóng và ngắn...

Hướng Dẫn Đăng Ký Nhận Mã Giảm Giá Highland Coffee

Highland Coffee đang có nhiều chương trình khuyến mã cho khách hàng của mình. Các khuyến mãi có thể bao gồm upsize, mua 1...

Quà cuối năm 2022 từ Shopify

Năm nay nhận quà từ các đối tác công nghệ hơi bị nhiều. Mới đây mình lại nhận được quà từ Shopify. Quà về đúng...

Nhận quà từ đối tác công nghệ Recharge

Recharge là một trong những công ty chuyên cung cấp giải pháp bán hàng đăng ký định kỳ (subscription payments) cho các nền tảng...

Hướng dẫn tải video ngắn Facebook Reel miễn phí

Facebook Reels là tính năng video ngắn mới của Facebook. Nếu bạn muốn tải những video ngắn này của mọi người thì bạn có...

BẠN XEM CHƯA

Tăng tốc sao chép dữ liệu với Ultra Copier

Chắc hẳn đôi lần dù rất bận nhưng bạn vẫn phải kiên nhẫn ngồi đợi thao tác sao chép dữ liệu từ máy tính...

Cổng thông tin điện tử phường Nhơn Hưng – An Nhơn – Bình Định bị tấn công

Theo thông tin đăng tải trên một diễn đàn hacker thì 1 cổng thông tin có tên miền chính phủ của tỉnh Bình Định...

Biến máy tính cá nhân thành trung tâm giải trí số quá đơn giản

Hầu như các thiết bị giải trí số đều trang bị cho mình những trình quản lý media chuyên nghiệp. Nếu bạn không có...

Chuyên gia bảo mật người Việt phát hiện lỗ hổng bảo mật trên hệ điều hành Windows

Vừa qua, anh Lê Hữu Quang Linh (linhlhq) - chuyên gia bảo mật của Trung tâm Giám sát an toàn không gian mạng quốc...

Kinh nghiệm ăn nhậu

GẦY KÈO Bạn bè lâu lâu cũng phải mời nhau nhậu vì nhiều khi không được mời nhậu nó nổi khùng... Đánh chết người vì...