Lạm dụng các lựa chọn có thể tùy chỉnh

Các trình duyệt web luôn cung cấp các tính năng mới, nhưng có gì thú vị nếu chúng ta không thể tạo ra những điều ngớ ngẩn và thú vị với chúng?

Trong bài viết này, chúng ta hãy xem qua một số bản demo mà tôi đã tạo bằng cách sử dụng tính năng được tùy chỉnh vẫn là phần tử

Bạn sẽ nhận thấy rằng chúng tôi đã sử dụng các phần tử bên trong Các phần tử để bao bọc từng tên thư mục. Điều đó sẽ hữu ích cho việc tạo kiểu cho tên thư mục đã chọn sau này. Mặc dù đây chỉ là một nhưng việc có thể thực hiện được điều này là một sự thay đổi khá lớn so với những gì có thể làm được trước đây.

Đó là bởi vì, cho đến gần đây, các chỉ có thể chứa văn bản, bởi vì đó là thứ duy nhất có thể xuất hiện bên trong các tùy chọn của một vùng chọn. Trình phân tích cú pháp HTML hiện đã được nới lỏng để cho phép nhúng nhiều phần tử HTML hơn vào các tùy chọn. Những trình duyệt không hỗ trợ các lựa chọn có thể tùy chỉnh sẽ bỏ qua các phần tử bổ sung này và chỉ hiển thị văn bản.

Vậy, cho đến thời điểm hiện tại, ngăn xếp thư mục của chúng ta trông như sau:

An unstyled select element with expanded options.

Tiếp theo, đây là điều quan trọng nhất bạn cần làm để chọn tham gia tính năng chọn có thể tùy chỉnh: hãy đặt lại giao diện mặc định của phần chọn và phần thả xuống của nó bằng cách sử dụng phần tử giả ::picker():

chọn,
::picker(chọn) {
  ngoại hình: chọn cơ sở;

Quy tắc CSS này giúp ích rất nhiều cho chúng ta: nó mở ra toàn bộ khả năng tạo kiểu cho toàn bộ vùng chọn, bao gồm nút, danh sách thả xuống và các tùy chọn. Nếu không có sự chọn tham gia này, bạn sẽ có một lựa chọn tiêu chuẩn.

Bây giờ hãy tạo kiểu cho vùng chọn, bắt đầu với phần nút của nó. Trước tiên, chúng ta sẽ loại bỏ biểu tượng bộ chọn bằng cách sử dụng phần tử giả ::picker-icon mới để ẩn nó:

select::picker-icon {
  hiển thị: không có;

Tiếp theo, hãy thêm một chút kiểu để tạo nút trông đẹp mắt:

chọn { nền: gradient tuyến tính( 135 độ, rgba(40, 40, 50, 0,4) 0%, rgba(60, 60, 70, 0,25) 50%, rgba(50, 50, 60, 0,35) 100% ); bộ lọc phông nền: độ mờ (12px) bão hòa (180%); bóng hộp: 0 8px 32px rgba(0, 0, 0, 0.2), chèn 0 1px 1px rgba(255, 255, 255, 0,15), chèn 0 -1px 1px rgba(0, 0, 0, 0.1); đường viền: 1px liền nét rgba(255, 255, 255, 0,2); màu: trắng; kích thước nội tuyến tối thiểu: 12rem;

Và đây là nút chọn mới của chúng tôi:

Nút chọn tùy chỉnh có nền mờ, biểu tượng thư mục và nhãn văn bản có tên là Âm nhạc.

Bây giờ chúng ta hãy chuyển sự chú ý của chúng ta sang phần thả xuống vì đây là nơi điều kỳ diệu xảy ra.

Trong phần chọn, danh sách thả xuống chứa tất cả các tùy chọn và xuất hiện khi bạn nhấp vào nút. Rất nhiều kiểu mặc định của trình duyệt đã áp dụng cho nó để đặt vị trí, màu nền, lề, v.v. Vì vậy, chúng ta sẽ phải vô hiệu hóa và ghi đè rất nhiều thứ.

Trong bản demo của chúng tôi, chúng tôi không muốn hiển thị danh sách thả xuống. Thay vào đó, chúng tôi muốn mỗi tùy chọn riêng lẻ (mỗi thư mục trong trường hợp này) xuất hiện như thể nổi phía trên trang mà không có phần tử vùng chứa.

Để thực hiện việc này, hãy sử dụng phần tử giả ::picker(select) để đặt kiểu của chúng ta:

::picker(chọn) { nền: trong suốt; đường viền: không có; bóng hộp: không có; tràn: hiển thị;

Và với điều này, danh sách thả xuống không còn hiển thị nữa và nó không còn hạn chế các tùy chọn hoặc cắt chúng nếu chúng tràn khu vực thả xuống.

Điều này mang lại cho chúng tôi những cải tiến sau:

Một phần tử chọn có các tùy chọn mở rộng được định dạng dưới dạng văn bản trong một danh sách dọc. Một tùy chọn có tên là âm nhạc được chọn và biểu thị nút bộ chọn hàng đầu được tạo kiểu bằng biểu tượng thư mục ở bên trái nhãn văn bản.

Bây giờ là lúc chúng ta chuyển sự chú ý sang các phần tử tùy chọn. Trước tiên, hãy thay thế biểu tượng dấu kiểm bằng một biểu tượng đĩa nhỏ bằng cách sử dụng phần tử giả ::checkmark:

tùy chọn::đánh dấu {
  nội dung: "●";
  màu sắc: #222;

Phần tử giả này giúp bạn dễ dàng thay đổi hình dạng, màu sắc hoặc thậm chí kích thước của dấu kiểm.

Ngoài ra, hãy thêm một phần tử giả bổ sung cho mỗi tùy chọn bằng cách sử dụng option::trước để hiển thị biểu tượng cảm xúc thư mục bên cạnh mỗi tùy chọn. Và, với một chút tinh chỉnh CSS, chúng ta sẽ có kết quả này:

Một cột dọc gồm các biểu tượng thư mục được mở rộng dưới dạng tùy chọn từ một thành phần được chọn. Mỗi thư mục bao gồm một nhãn ở bên phải.

Bây giờ chúng ta có một danh sách các thư mục nổi trên đầu trang khi chúng ta nhấp vào nút chọn. Nó cũng hoạt động giống như bất kỳ lựa chọn nào khác, bằng chuột hoặc bằng bàn phím, vì vậy chúng tôi chỉ có thể cảm ơn trình duyệt vì đã duy trì khả năng truy cập đầu vào trong khi chúng tôi tận hưởng CSS.

Bây giờ, hãy áp dụng một số chuyển đổi CSS để làm cho ngăn xếp các thư mục trông cong hơn một chút, để nó trông bắt mắt hơn.

Để đạt được điều này, chúng ta sẽ cần thêm một cú pháp CSS mới. Thật không may, cú pháp này chưa được phổ biến rộng rãi: hàm sibling-index(). Hàm này trả về chỉ mục của phần tử trong phần tử anh chị em của nó. Hàm sibling-count() cũng tồn tại và nó trả về tổng số anh chị em, nhưng chúng ta sẽ không cần nó ở đây.

Có quyền truy cập vào chỉ mục của phần tử hiện tại trong phần tử anh chị em của nó có nghĩa là chúng ta có thể tạo kiểu cho từng tùy chọn tùy thuộc vào vị trí của nó trong danh sách thả xuống chọn. Đây chính xác là những gì chúng ta cần để làm cho các tùy chọn xuất hiện ở góc độ lớn dần.

Đây là mã:

tùy chọn {
  --rotation-offset: -4deg;
  xoay: calc(sibling-index() * var(--rotation-offset));

Trong đoạn mã này, trước tiên chúng tôi tạo một thuộc tính tùy chỉnh có tên là --rotation-offset, thuộc tính này xác định góc mà mỗi tùy chọn sẽ xoay so với tùy chọn trước đó. Sau đó, chúng tôi sử dụng giá trị này với thuộc tính rotate, nhân giá trị của nó với sibling-index(). Bằng cách đó, tùy chọn đầu tiên được xoay -4 độ, tùy chọn thứ hai -8 độ, tùy chọn thứ ba -12 độ, v.v.

Bây giờ, chỉ điều đó thôi là chưa đủ để tạo ảo giác về một chồng thư mục cong vì mỗi thư mục sẽ xoay quanh điểm gốc riêng của nó, điểm này nằm ở góc trên cùng bên trái của mỗi thư mục theo mặc định. Ngay bây giờ, chúng tôi nhận được điều này:

Một cột gồm các biểu tượng thư mục có nhãn ở bên phải. Mỗi thư mục sẽ được xoay nhiều hơn một chút khi danh sách đi xuống.

Hãy sử dụng thuộc tính transform-origin để đặt điểm gốc chung mà tất cả các tùy chọn sẽ xoay quanh đó. Vì transform-origin liên quan đến từng phần tử riêng lẻ nên chúng ta cần sử dụng lại hàm sibling-index() để di chuyển tất cả các điểm gốc lên và sang phải để tất cả chúng đều ở cùng một vị trí:

tùy chọn {
  --rotation-offset: -4deg;
  xoay: calc(sibling-index() * var(--rotation-offset));
  nguồn gốc biến đổi: phải calc(sibling-index() * -1.5rem);

Và với điều này, chúng ta nhận được kết quả như sau:

Một cột dọc gồm các thư mục có nhãn ở bên phải xòe ra và cong về phía bên phải.

Bước cuối cùng là tạo hiệu ứng cho các tùy chọn. Nó trông rất đẹp nhưng chúng tôi muốn chồng thư mục cong dần cho đến khi đạt được hình dạng cuối cùng. Điều đó sẽ khiến câu chuyện trở nên sinh động và thú vị hơn khi tương tác.

Hãy đặt lại chế độ xoay của tùy chọn theo mặc định và áp dụng chuyển đổi với chức năng nới lỏng:

tùy chọn { xoay: 0 độ; chuyển tiếp: xoay 0,3s khối bezier(0,34, 1,56, 0,64, 1);

Và bây giờ, hãy chỉ áp dụng góc xoay phù hợp khi phần chọn được mở:

select:open tùy chọn {
  xoay: calc(sibling-index() * -1 *  var(--rotation-offset));

Thật không may, những điều trên là chưa đủ. Theo mặc định, quá trình chuyển đổi CSS không được kích hoạt khi một phần tử xuất hiện, đó là trường hợp đối với các tùy chọn của chúng tôi. Rất may, đã có cách khắc phục sự cố này: @starting-style tại quy tắc. Quy tắc này cho phép chúng tôi xác định trạng thái ban đầu của các tùy chọn, giúp quá trình chuyển đổi có thể phát ngay khi các tùy chọn xuất hiện:

@starting-style {
  chọn: tùy chọn mở {
    xoay: 0 độ;
  }

Một điều nữa để làm cho nó thậm chí còn đẹp hơn. Chúng ta hãy trì hoãn mỗi lần chuyển đổi so với lần chuyển đổi trước đó để làm cho nó trông giống như mỗi thư mục xuất hiện sau thư mục trước đó một chút. Để đạt được điều này, hãy sử dụng hàm sibling-index() một lần nữa để nhân với độ trễ chuyển tiếp ngắn:

tùy chọn {
  độ trễ chuyển tiếp: calc((sibling-index() - 1) * 0,01s);

Bây giờ chúng ta đã triển khai một chồng thư mục hoạt hình, cong, cong bằng phần tử :