Marquee in CSS - Hướng dẫn cho người mới bắt đầu
Marquee lần đầu tiên được giới thiệu trong Internet Explorer và rất phổ biến vào những năm 90 trước khi W3C cuối cùng quyết định loại trừ nó khỏi yếu tố tiêu chuẩn HTML do các vấn đề về khả năng sử dụng. Các nhà thiết kế web được khuyến khích không sử dụng thẻ.
Đáng ngạc nhiên là mặc dù, marquee hiện đang trở lại, không phải trong một thẻ định dạng như nó đã làm, nhưng trong một Mô-đun CSS. Mô-đun này có sẵn như là một phần của đặc tả CSS của Webkit và W3C hiện đang làm việc trên một mô-đun tương tự. Tuy nhiên, do phiên bản W3C vẫn đang ở giai đoạn Khuyến nghị của Ứng viên, nên nó chưa được áp dụng. Vì vậy, tại thời điểm này, chúng tôi sẽ chỉ bao gồm một từ đặc tả Webkit.
Cú pháp
Trước hết, marquee có thể được xác định bằng cú pháp tốc ký sau.
-webkit-marquee: [direction] [gia tăng] [lặp lại] [style] [speed]
Mỗi giá trị cần thiết trong cú pháp ở trên, tôi tin rằng, khá tự giải thích, hoặc nếu không bạn có thể tìm thấy chúng được giải thích đầy đủ tại tài liệu này. Vì vậy, nếu bạn muốn tìm hiểu sâu hơn về cách cú pháp này hoạt động, bạn luôn có thể tham khảo tài liệu trước.
Sau đó, tham gia với chúng tôi khi chúng tôi tiến hành tạo một số ví dụ thực tế và xem nó hoạt động như thế nào.
Ví dụ 1: Cuộn văn bản
Được rồi, trong ví dụ đầu tiên, chúng ta sẽ tạo ra chuyển động cổ điển của vùng chọn có văn bản di chuyển từ phải sang trái.
Hãy tạo đánh dấu văn bản của chúng tôi như dưới đây:
Lollipop topping chanh giọt jujubes áp dụng bánh trái cây tart cam thảo vừng.
Sau đó xác định vùng chọn với cú pháp sau.
-webkit-marquee: tự động cuộn vô hạn trung bình bình thường; tràn-x: -webkit-marquee;
Khi hướng marquee được đặt thành Tự động, Theo mặc định, nó sẽ di chuyển từ phải sang trái; Ngoài ra, bạn có thể thay đổi giá trị này thành trái. Cũng lưu ý rằng tràn-x tài sản phải được đặt thành -webkit-marquee để nội dung sẽ luôn luôn hoạt động như một. Nếu bạn bỏ qua thuộc tính này, văn bản sẽ không di chuyển trên.
Xem bản demo.
Ví dụ 2: Bounce qua lại
Trong ví dụ thứ hai, chúng tôi sẽ thử đưa ra một phong cách khác cho marquee. Lần này chúng tôi sử dụng Luân phiên thay vì cuộn và thay đổi giá trị hướng thành đúng. Theo cách đó, marquee sẽ di chuyển từ trái sang phải sau đó nảy qua lại.
-webkit-marquee: tự động trung bình vô hạn thay thế bình thường; tràn-x: -webkit-marquee;
Xem bản demo
Ví dụ 3: Di chuyển văn bản lên trên
Và cho ví dụ cuối cùng, chúng tôi sẽ thay đổi hướng marquee để di chuyển lên trên. Có hai phương hướng các giá trị để làm như vậy; bạn có thể thay đổi giá trị thành lên hoặc là phía trước.
Cá nhân tôi không hiểu tại sao Webkit cung cấp hai giá trị về cơ bản làm điều tương tự vì tôi nghĩ rằng điều đó có thể dẫn đến sự nhầm lẫn cho một số người.
-webkit-marquee: lên cuộn vô hạn trung bình bình thường; tràn-x: -webkit-marquee;
Xem bản demo
Hơn nữa, tôi đã biên soạn thêm một số ví dụ nhưng chúng sẽ áp đảo nếu tất cả chúng được giải thích ở đây.
Nhưng, bạn có thể xem tất cả các bản demo và tải xuống các nguồn từ các liên kết dưới đây.
- Bản giới thiệu
- Tải xuống nguồn
Suy nghĩ cuối cùng & Tài liệu tham khảo
Lần đầu tiên tôi ngạc nhiên rằng vẫn có sự quan tâm đến marquee, điều mà tôi nghĩ đã đáp ứng kết thúc của nó. Điều này cũng khiến tôi đặt câu hỏi làm thế nào một mô-đun CSS như thế này sẽ hữu ích. Trong thực tế, mọi trình duyệt vẫn đang hỗ trợ di sản của nhãn.
Vậy bạn nghĩ như thế nào? Marquee có còn phù hợp ở độ tuổi này không và nó có hữu ích trong thiết kế web hiện đại không?
Nếu bạn vẫn tò mò về công cụ marquee này, bạn có thể truy cập một số tài liệu tham khảo sau:
- Tham khảo CSS Safari
- Trình tạo marquee Webkit
- Tài liệu toàn diện cũ
thẻ từ Sitepoint. - Và luôn có một máy phát điện cho hầu hết mọi thứ, kể cả Marquee Generator này.
