Hiển thị thủ thuật CSS
|
Kiến thức về CSS là một kỹ năng cơ bản trong không gian phát triển web. Tuy nhiên, việc triển khai một số mẫu thiết kế web nhất định chỉ bằng CSS có thể là một nhiệm vụ khó chịu và thường đòi hỏi sự hiểu biết sâu sắc về nó. Trong bài viết này, Rico Mossesgeld, Nhà phát triển web tự do hàng đầu, chia sẻ một số mẹo và thủ thuật CSS giúp tận dụng các tính năng CSS ít được biết đến để giải quyết các vấn đề về bố cục và thiết kế thực sự Show
Qua Rico Mossesgeld Rico đã xây dựng các ấn phẩm và dịch vụ trực tuyến cho các cơ quan lớn, công ty truyền thông, cơ sở, quỹ và nhật báo lớn. CHIA SẺ CHIA SẺ Lĩnh vực phát triển web front-end đã đạt được những tiến bộ đáng kể trong vài năm qua. Tuy nhiên, giao diện người dùng web, như người dùng thấy, vẫn giống nhau. Đánh dấu HTML được tạo kiểu bằng CSS Nhiều vấn đề về bố cục ban đầu có vẻ đơn giản nhưng thường tỏ ra phức tạp. Nếu không có kiến thức sâu rộng về cách thức hoạt động của một số tính năng CSS nhất định, những bố cục nâng cao này dường như không thể đạt được chỉ với CSS Trong bài viết này, bạn sẽ tìm thấy tám mẹo và thủ thuật CSS chuyên nghiệp tận dụng các tính năng CSS ít được biết đến hơn để triển khai một số bố cục và hiệu ứng nâng cao này 1. Tối đa hóa bộ chọn anh chị em CSSVấn đề. Bạn đang đánh mất cơ hội tối ưu hóa bằng cách không sử dụng bộ chọn anh chị em Giải pháp. Sử dụng bộ chọn anh chị em bất cứ khi nào nó có ý nghĩa. Bất cứ khi nào bạn đang làm việc với một danh sách các mục và bạn cần xử lý mục đầu tiên hoặc mục cuối theo cách khác, bản năng đầu tiên của bạn có thể là sử dụng bộ chọn CSS giả Ví dụ: khi tạo biểu tượng menu hamburger chỉ CSS Xem Pen Maximizing CSS Sibling Selectors 1 của Rico Mossesgeld (@ricotheque) trên CodePen Điều này thật ý nghĩa. Mỗi thanh có một đáy lề, ngoại trừ thanh cuối cùng Tuy nhiên, hiệu ứng tương tự cũng có thể xảy ra thông qua bộ chọn anh chị em liền kề (+) Xem Pen Maximizing CSS Sibling Selectors 2 của Rico Mossesgeld (@ricotheque) trên CodePen Điều này cũng có ý nghĩa. Mọi thứ sau thanh đầu tiên đều có lề trên. Thủ thuật CSS này không chỉ tiết kiệm thêm một vài byte (có thể dễ dàng bổ sung cho bất kỳ dự án cỡ trung bình nào) mà còn mở ra một thế giới khả năng Xem xét danh sách các thẻ này Xem Pen Maximizing CSS Sibling Selectors 3 của Rico Mossesgeld (@ricotheque) trên CodePen Mỗi cái có một tiêu đề và văn bản, cái sau được ẩn theo mặc định. Nếu bạn chỉ muốn hiển thị văn bản của thẻ đang hoạt động (với lớp Xem Pen Maximizing CSS Sibling Selectors 4 của Rico Mossesgeld (@ricotheque) trên CodePen Với một chút JavaScript, điều này cũng có thể tương tác Tuy nhiên, chỉ dựa vào JavaScript cho tất cả những điều đó sẽ dẫn đến một tập lệnh như thế này Xem Pen Maximizing CSS Sibling Selectors 5 của Rico Mossesgeld (@ricotheque) trên CodePen nơi bao gồm jQuery như một phần phụ thuộc cho phép bạn có một đoạn mã ngắn 2. Định cỡ phần tử HTML nhất quánVấn đề. Các phần tử HTML có kích thước không nhất quán trên các trình duyệt khác nhau Giải pháp. Đặt Các trình duyệt khác chỉ xem nội dung khi tính chiều rộng của phần tử HTML, mọi thứ khác được coi là phần dư thừa. Div Internet Explorer coi phần đệm và đường viền là một phần của chiều rộng. Ở đây, div từ phía trên sẽ rộng 200 pixel Xem Bản trình diễn mô hình hộp CSS Pen 1 của Rico Mossesgeld (@ricotheque) trên CodePen Khi bạn hiểu rõ về nó, bạn sẽ thấy cách tiếp cận thứ hai hợp lý hơn, ngay cả khi nó không tuân theo
Trong mọi trường hợp, CSS sau giữ cho kích thước phần tử (và do đó là bố cục) nhất quán trên tất cả các trình duyệt Xem Pen CSS Box Model Demo 2 của Rico Mossesgeld (@ricotheque) trên CodePen Bộ bộ chọn CSS thứ hai bảo vệ các thành phần HTML được tạo kiểu mà không cần lưu ý đến hộp viền khỏi sự gián đoạn bố cục 3. Các yếu tố chiều cao năng độngVấn đề. Giữ chiều cao của phần tử HTML tỷ lệ thuận với chiều rộng của nó Giải pháp. Sử dụng đệm dọc để thay thế cho chiều cao Giả sử bạn muốn chiều cao của phần tử HTML luôn khớp với chiều rộng CSS của nó. Xem Pen Dynamic Height Elements 1 của Rico Mossesgeld (@ricotheque) trên CodePen Câu trả lời là đặt chiều cao thành 0 và sử dụng padding-top hoặc padding-bottom để đặt chiều cao thực tế của Xem Pen Dynamic Height Elements 2 của Rico Mossesgeld (@ricotheque) trên CodePen Bây giờ Kỹ thuật này, với một số sửa đổi, rất phù hợp để tạo video nhúng giữ nguyên tỷ lệ khung hình của chúng ở bất kỳ kích thước nào. Chỉ cần căn chỉnh phần nhúng với đầu của Xem Pen Dynamic Height Elements 3 của Rico Mossesgeld (@ricotheque) trên CodePen 4. Phần tử chiều rộng độngVấn đề. Giữ chiều rộng của phần tử HTML tỷ lệ thuận với chiều cao của nó Giải pháp. Sử dụng cỡ chữ làm cơ sở cho kích thước của phần tử Bây giờ, điều ngược lại, hoặc các thùng chứa thay đổi chiều rộng bằng chiều cao của chúng thì sao? . Hãy nhớ rằng chiều rộng và chiều cao có thể tính bằng Phần tử có Xem Các yếu tố chiều rộng động của bút của Rico Mossesgeld (@ricotheque) trên CodePen Bạn muốn thay đổi chiều cao của Lưu ý duy nhất là không thể tự động làm cho kích thước phông chữ của phần tử khớp với chiều cao của phần tử gốc chỉ thông qua CSS. Tuy nhiên, kỹ thuật này cho phép cắt giảm kích thước tập lệnh Javascript từ đến 5. Định tâm theo chiều dọc của nội dung độngVấn đề. Giữ phần tử HTML (có chiều cao không xác định) được căn giữa theo chiều dọc bên trong phần tử khác Giải pháp. Đặt phần tử bên ngoài thành Có thể căn giữa theo chiều dọc một dòng văn bản với Xem Pen Vertical Centering of Dynamic Content 1 của Rico Mossesgeld (@ricotheque) trên CodePen Đối với nhiều dòng văn bản hoặc nội dung phi văn bản, bảng CSS là câu trả lời. Đặt màn hình của Xem Pen Vertical Centering of Dynamic Content 2 của Rico Mossesgeld (@ricotheque) trên CodePen Hãy nghĩ về thủ thuật CSS này tương đương theo chiều dọc của Xem Pen Vertical Centering of Dynamic Content 3 của Rico Mossesgeld (@ricotheque) trên CodePen 6. Cột có cùng chiều caoVấn đề. Giữ các cột có cùng chiều cao Giải pháp. Đối với mỗi cột, hãy sử dụng giá trị âm lớn Sử dụng Xem Pen Same-Height Columns 1 của Rico Mossesgeld (@ricotheque) trên CodePen Lưu ý việc sử dụng Đường viền của cột đầu tiên và cột cuối cùng không đi xuống hết; . Để khắc phục điều này, chỉ cần thêm Xem Pen Same-Height Columns 2 của Rico Mossesgeld (@ricotheque) trên CodePen Một giải pháp thay thế đơn giản hơn là Flexbox. Một lần nữa, chỉ sử dụng cái này nếu không cần hỗ trợ Internet Explorer Xem Pen Same-Height Columns 3 của Rico Mossesgeld (@ricotheque) trên CodePen Một giải pháp thay thế khác với hỗ trợ trình duyệt tốt hơn. Bảng CSS (không có Xem Pen Same-Height Columns 4 của Rico Mossesgeld (@ricotheque) trên CodePen 7. Đi xa hơn hộpVấn đề. Hộp và đường thẳng rất sáo rỗng Giải pháp. Sử dụng Lấy một loạt các tấm điển hình từ một trang web tiếp thị hoặc tài liệu quảng cáo. một chồng slide thẳng đứng với một điểm kỳ dị. Đánh dấu và CSS của nó có thể trông giống như thế này Xem Cây bút vượt ra ngoài hộp 1 của Rico Mossesgeld (@ricotheque) trên CodePen Với chi phí làm cho việc đánh dấu trở nên phức tạp hơn nhiều, các ô hình hộp này có thể được biến thành một chồng các hình bình hành Xem Cây bút vượt ra ngoài hộp 2 của Rico Mossesgeld (@ricotheque) trên CodePen Có rất nhiều thứ đang diễn ra ở đây Chiều cao của mỗi ô được điều khiển bởi. cửa sổ-container. Lề dưới âm đảm bảo các tấm xếp chồng lên nhau một cách khít khao
Trên một ghi chú liên quan, biến một hình ảnh thành hình tròn hoặc hình bầu dục rất đơn giản. Chỉ cần áp dụng Xem Cây bút vượt ra ngoài hộp 3 của Rico Mossesgeld (@ricotheque) trên CodePen Các sửa đổi CSS theo thời gian thực chẳng hạn như những sửa đổi này giúp giảm bớt nhu cầu chuẩn bị nội dung trước khi xuất bản trên trang web. Thay vì áp dụng mặt nạ hình tròn cho ảnh trong Photoshop, nhà phát triển web chỉ có thể áp dụng hiệu ứng tương tự thông qua CSS mà không thay đổi ảnh gốc Ưu điểm bổ sung là bằng cách để nguyên nội dung và không phụ thuộc vào thiết kế hiện tại của trang web, việc thiết kế lại hoặc cải tiến trong tương lai được tạo điều kiện thuận lợi 8. Chế độ ban đêmVấn đề. Triển khai chế độ ban đêm mà không cần tạo biểu định kiểu mới Giải pháp. Sử dụng bộ lọc CSS Một số ứng dụng có chế độ ban đêm, trong đó giao diện tối đi để dễ đọc hơn trong điều kiện ánh sáng yếu. Trên các trình duyệt mới hơn, các bộ lọc CSS có thể tạo hiệu ứng tương tự, bằng cách áp dụng các hiệu ứng giống như Photoshop Một bộ lọc CSS hữu ích là Xem Pen Night Mode 1 của Rico Mossesgeld (@ricotheque) trên CodePen Sử dụng bộ lọc này trên văn bản màu đen và nền trắng mô phỏng chế độ ban đêm. Xem Pen Night Mode 2 của Rico Mossesgeld (@ricotheque) trên CodePen Thật không may, hình ảnh trông kỳ lạ, bởi vì màu sắc của nó bị đảo ngược với mọi thứ khác. Tin tốt là nhiều bộ lọc có thể áp dụng cùng một lúc. Việc thêm bộ lọc xoay màu sắc sẽ chuyển hình ảnh và nội dung trực quan khác trở lại bình thường Xem Pen Night Mode 3 của Rico Mossesgeld (@ricotheque) trên CodePen Tại sao điều này làm việc? . Đây là bản demo về cách CSS ở chế độ ban đêm sẽ hoạt động khi được bật qua nút do JavaScript cung cấp Tận dụng tối đa CSSTrừ khi trình duyệt hoặc cách xây dựng trang web thay đổi đáng kể trong tương lai, kiến thức tốt về CSS sẽ vẫn là một kỹ năng cơ bản trong không gian phát triển web Tất cả các mẹo CSS này đều có điểm chung. Họ tối đa hóa việc sử dụng CSS làm ngôn ngữ tạo kiểu, để trình duyệt tự thực hiện công việc nặng nhọc. Và, khi được thực hiện đúng, điều này sẽ luôn mang lại kết quả tốt hơn, hiệu suất tốt hơn và do đó mang lại trải nghiệm người dùng tốt hơn Hãy cho chúng tôi biết nếu bạn có bất kỳ thủ thuật CSS nào mà bạn thấy thú vị và hữu ích trong phần bình luận bên dưới Hiểu những điều cơ bảnLàm cách nào tôi có thể đặt chiều cao của DIV theo phần trăm chiều rộng của nó?Sử dụng đệm dọc thay vì chiều cao. Thuộc tính chiều cao, khi được đặt dưới dạng phần trăm, được tính tương ứng với chiều cao của cấp độ gốc. Tuy nhiên, một DIV có chiều cao được đặt thành 0 có thể có phần đệm trên cùng hoặc phần đệm dưới cùng được đặt thành phần trăm chiều rộng của nó Làm cách nào tôi có thể căn giữa nội dung của DIV theo chiều dọc?Nếu đó chỉ là một dòng văn bản, hãy đặt "line-height" thành chiều cao của vùng chứa. Nếu đó là nội dung không phải văn bản, hãy bọc DIV trong một "màn hình. table" DIV và đặt DIV bên trong thành "display. ô bảng". Nếu hỗ trợ các trình duyệt web nguyên thủy không có trong danh sách việc cần làm của bạn, bạn luôn có thể sử dụng Flexbox Thẻ Thủ thuật CSSMẹoNgười làm việc tự do? Tìm công việc tiếp theo của bạn. Việc làm Lập trình viên Front-End Xem thông tin đầy đủ Rico Mossesgeld nhà phát triển Giới thiệu về tác giả Rico đã xây dựng các ấn phẩm và dịch vụ trực tuyến cho các cơ quan lớn, công ty truyền thông, cơ sở, quỹ và nhật báo lớn. Anh ấy dựa vào các kỹ năng giao tiếp chủ động của mình để giúp các đối tác tìm ra giải pháp và đã chia sẻ kiến thức chuyên môn về phát triển của mình với các đồng đội đến từ các quốc gia và múi giờ khác nhau Thuê Rico Bình luậnsương mù Min-height would solve a lot of those without sabotaging accessibility, and basic flexbox has worked fine in IE for a while. (You'd also benefit from min-width: 0;) Just a heads-up. ETA: Oh, I'd forgotten about the filters. Does this not work? I don't know—I don't use the filters, but the CSS :not() is quite useful. sương mù Min-height would solve a lot of those without sabotaging accessibility, and basic flexbox has worked fine in IE for a while. (You'd also benefit from min-width: 0;) Just a heads-up. ETA: Oh, I'd forgotten about the filters. Does this not work? I don't know—I don't use the filters, but the CSS :not() is quite useful. Juan Pablo Carzolio ban đầu tôi nghĩ về. không quá, nhưng điều đó sẽ áp dụng bộ lọc cho trẻ em, không phải vùng chứa và nó có thể hoặc không phải là thứ bạn cần Juan Pablo Carzolio ban đầu tôi nghĩ về. không quá, nhưng điều đó sẽ áp dụng bộ lọc cho trẻ em, không phải vùng chứa và nó có thể hoặc không phải là thứ bạn cần Juan Pablo Carzolio Cảm ơn vì bài báo. Trước đây, tôi đã sử dụng nhiều "thủ thuật" này và thấy chúng rất hữu ích (đặc biệt là tỷ lệ khung hình). Một chi tiết nhỏ. liên quan đến phần cuối cùng, sự thay đổi màu sắc là không cần thiết (trên thực tế, nó đảo ngược các màu ban đầu, giữ cho bầu trời có màu cam). Đảo ngược chỉ là những gì cần thiết để hoàn nguyên đảo ngược của vùng chứa và lấy lại bản gốc. Ngoài ra, có lẽ tôi cũng sẽ xóa bộ chọn hậu duệ (>) ngay lập tức để khớp với các hình ảnh được lồng sâu hơn. Chúc mừng Juan Pablo Carzolio Cảm ơn vì bài báo. Trước đây, tôi đã sử dụng nhiều "thủ thuật" này và thấy chúng rất hữu ích (đặc biệt là tỷ lệ khung hình). Một chi tiết nhỏ. liên quan đến phần cuối cùng, sự thay đổi màu sắc là không cần thiết (trên thực tế, nó đảo ngược các màu ban đầu, giữ cho bầu trời có màu cam). Đảo ngược chỉ là những gì cần thiết để hoàn nguyên đảo ngược của vùng chứa và lấy lại bản gốc. Ngoài ra, có lẽ tôi cũng sẽ xóa bộ chọn hậu duệ (>) ngay lập tức để khớp với các hình ảnh được lồng sâu hơn. Chúc mừng Diego Díaz Ogni Cảm ơn vì bài báo. Có một số thứ nên có trong hộp công cụ của mọi nhà phát triển giao diện người dùng giống như bộ chọn Liền kề hoặc Anh chị em. Như đã đọc trong @Carradee. disqus nhận xét việc sử dụng. not cũng là một bổ sung tuyệt vời, đại loại như `. không phải(. đang hoạt động){hiển thị. không;}`. Ngăn việc phải chọn loại màn hình sẽ sử dụng khi bạn muốn hiển thị thứ gì đó (kế thừa). Việc sử dụng `height` làm thuộc tính hơi nguy hiểm vì nó ngăn phần tử phát triển (thay vào đó, sử dụng `min-height` là một cách thực hành tốt hơn). Ngoài ra, thuộc tính `user-select` là thứ cần thêm vào các mô-đun có thể thu gọn (có thể gõ) đó. Nó tránh làm nổi bật văn bản khi nhấp chuột (thêm một con trỏ vi sai cũng là một cách thực hành UX tốt). Đối với các mẫu flexbox, đây là hướng dẫn đầy đủ cho bất kỳ ai cần tìm hiểu sâu hơn về các thuộc tính và khả năng tương thích. https. //www. đỉnh cao. com/front-end/how-to-build-css-only-smart-layouts-with-flexbox#discover-dynamite-computer-engineers-today Đối với căn chỉnh dọc Flexbox, bạn có thể chỉ cần đặt nó vào vùng chứa để đảm bảo rằng mọi . cột;` thay vào đó hãy sử dụng `justify-content`). Cảm ơn một lần nữa cho bài viết và nhiều mẹo và thủ thuật Diego Díaz Ogni Cảm ơn vì bài báo. Có một số thứ nên có trong hộp công cụ của mọi nhà phát triển giao diện người dùng giống như bộ chọn Liền kề hoặc Anh chị em. Như đã đọc trong @Carradee. disqus nhận xét việc sử dụng. not cũng là một bổ sung tuyệt vời, đại loại như `. không phải(. đang hoạt động){hiển thị. không;}`. Ngăn việc phải chọn loại màn hình sẽ sử dụng khi bạn muốn hiển thị thứ gì đó (kế thừa). Việc sử dụng `height` làm thuộc tính hơi nguy hiểm vì nó ngăn phần tử phát triển (thay vào đó, sử dụng `min-height` là một cách thực hành tốt hơn). Ngoài ra, thuộc tính `user-select` là thứ cần thêm vào các mô-đun có thể thu gọn (có thể gõ) đó. Nó tránh làm nổi bật văn bản khi nhấp chuột (thêm một con trỏ vi sai cũng là một cách thực hành UX tốt). Đối với các mẫu flexbox, đây là hướng dẫn đầy đủ cho bất kỳ ai cần tìm hiểu sâu hơn về các thuộc tính và khả năng tương thích. https. //www. đỉnh cao. com/front-end/how-to-build-css-only-smart-layouts-with-flexbox#discover-dynamite-computer-engineers-today Đối với căn chỉnh dọc Flexbox, bạn có thể chỉ cần đặt nó vào vùng chứa để đảm bảo rằng mọi . cột;` thay vào đó hãy sử dụng `justify-content`). Cảm ơn một lần nữa cho bài viết và nhiều mẹo và thủ thuật Seth Anurag Thông tin, sâu sắc và thiết thực. Thanks Seth Anurag Thông tin, sâu sắc và thiết thực. Thanks ysub Đây là danh sách tốt nhưng tôi muốn thêm một chiến thuật nữa mà tôi sử dụng để định tâm phần tử theo chiều dọc và đó là. hàng đầu. 50%; . dịchY(-50%); . https. // codepen. io/anon/pen/zzqOXW?editors=1100 Hiển thị hoạt động như thế nào trong CSS?Thuộc tính CSS hiển thị đặt xem một phần tử được coi là một khối hay phần tử nội tuyến và bố cục được sử dụng cho phần tử con của nó, chẳng hạn như bố cục dòng, lưới hoặc flex. Formally, the display property sets an element's inner and outer display types.
Điều gì đã xảy ra với thủ thuật CSS?Thủ thuật CSS, chính trang web mà bạn đang xem này, đã được DigitalOcean mua lại . Bạn cũng có thể nghe trực tiếp từ họ trên blog DigitalOcean. Điều này sẽ thú vị nhất nếu chúng ta có một cuộc trò chuyện về nó, vì vậy hãy cho phép tôi bắt đầu nó.
Các tùy chọn hiển thị trong CSS là gì?Giá trị tài sản 4 thuộc tính hiển thị là gì?Mô hình hộp quan hệ. Thuộc tính hiển thị. Một số bài học trước chúng ta đã xem lại mô hình hộp và bốn thuộc tính cấu thành nó. nội dung, phần đệm, đường viền và lề . |
