programming css

Tại sao chúng ta không nên sử dụng CSS nội tuyến

Cho dù đó là thông qua tùy chọn chủ đề WordPress hay chức năng JavaScript, các nhà phát triển giao diện người dùng đôi khi phải triển khai mã CSS động cho một trang

Ví dụ: giả sử việc nhấp vào nút chuyển đổi menu sẽ chuyển danh sách menu giữa các trạng thái

0 sang

Hoặc bạn muốn tự động điều chỉnh bố cục cột chủ đề WordPress dựa trên việc sử dụng khu vực tiện ích hoặc có các cột tiện ích chân trang linh hoạt

Mặc dù luôn có nhiều cách để lột da một con mèo, nhưng cách đó không bao giờ liên quan đến CSS nội tuyến

Làm rõ về thuật ngữ

Có ba cách để đưa CSS vào một trang web. CSS bên ngoài, CSS bên trong và CSS nội tuyến

CSS bên ngoài

CSS bên ngoài xảy ra khi tệp biểu định kiểu được tham chiếu trong phần đầu của tài liệu. Ví dụ

CSS nội bộ

Đây là khi bạn đưa trực tiếp CSS của trang cụ thể vào phần đầu của tài liệu. Ví dụ

CSS nội tuyến [cái xấu mà bạn không bao giờ nên sử dụng]

Đây là khi bạn áp dụng CSS trực tiếp vào phần tử HTML. Ví dụ

This CSS can't be overridden without a hacky !important flag. ¯\_[ツ]_/¯

Trái ngược với những gì bạn mong đợi khi xem xét tên của hàm, wp_add_inline_style thực sự hỗ trợ việc thêm CSS nội bộ vào trang chứ không phải CSS nội tuyến

Tại sao không phải CSS nội tuyến?

1. Không có cách nào để thao tác các lớp giả.
2. Cần một lá cờ quan trọng để ghi đè.
3. Nếu một. cờ quan trọng được sử dụng nội tuyến, bạn cần JavaScript để ghi đè. Barf.

Mặc dù về mặt kỹ thuật, nó hoạt động nhưng có một lý do khiến các trang web bao gồm phần lớn các kiểu CSS của họ trong các tệp bên ngoài chứ không phải CSS nội tuyến. CSS nội tuyến không linh hoạt lắm, ngay cả với liều lượng rất nhỏ

Các trường hợp sử dụng "nội tuyến" phổ biến và cách tránh

Trong hầu hết mọi trường hợp, thêm một lớp cơ thể là cách tốt nhất để thêm các kiểu động. Ở những người khác, đặc biệt là khi có liên quan đến “hình ảnh nổi bật” hoặc màu tùy chỉnh, CSS nội bộ là lựa chọn hợp lý

Menu chuyển đổi

Tôi không thể nói cho bạn biết bao nhiêu lần tôi đã thấy mã jQuery được viết như thế này

$[ ".menu-toggle" ].click[function[] {
  $[ ".menu" ].toggle[];
}];

Về cơ bản, chức năng chuyển đổi jQuery chuyển đổi phần tử đã chọn giữa các trạng thái nội tuyến

1 và

Sự cố giới hạn chức năng chuyển đổi ở trạng thái hiển thị/ẩn đơn giản trở lại linh hoạt. Nếu bạn muốn làm gì khác ngoài hiện/ẩn menu thì sao?

Thay vào đó, chuyển đổi một lớp cơ thể sẽ vượt trội hơn rất nhiều

$[ ".menu-toggle" ].click[function[] {
  $[ "body" ].toggleClass[ "menu-toggled" ];
}];

Từ đó, bạn có thể viết đoạn CSS kèm theo sau để chuyển đổi hiển thị menu

.menu-toggled .menu {
	display: block;
}

Giả sử bạn cũng muốn thay đổi màu nền của cơ thể thành màu vàng. Chỉ cần thêm những điều sau đây

.menu-toggled {
	background: yellow;
}

Một trường hợp hoàn toàn ngẫu nhiên, chắc chắn, nhưng nó thể hiện sự linh hoạt của kỹ thuật. Đối với cả bạn và người dùng chủ đề của bạn

Cửa sổ bật lên cuộn xuống

Bạn đã bao giờ cuộn xuống một trang và nhận thấy các phần khác nhau của trang dường như trượt vào từ bên ngoài màn hình chưa?

Nếu bạn đã xem qua các công cụ phát triển web của trình duyệt, có thể bạn sẽ nhận thấy có JavaScript thao túng vị trí ngang trong thời gian thực

Điều này cũng không cần thiết

Thay vào đó, hãy đặt vị trí ban đầu của div ngoài trang trong biểu định kiểu của bạn, sau đó kích hoạt một lớp trên div sau khi người dùng đã cuộn đến điểm kích hoạt. Sau đó, lớp kích hoạt sẽ đặt vị trí của div thành điểm mong muốn, sử dụng các chuyển đổi CSS để bắt chước JavaScript trực tiếp thao tác định vị bằng CSS nội tuyến

Bạn cũng có thể muốn cung cấp một dự phòng để những người đã tắt JavaScript có thể thực sự nhìn thấy mọi thứ như thể chúng luôn ở trạng thái "cuộn trong", nhưng đó là một cuộc tranh luận hoàn toàn khác

Hình ảnh nổi bật và Hình nền tiêu đề

Điều này tôi dễ tha thứ hơn một chút, bởi vì khi người dùng đặt hình ảnh nổi bật làm hình nền tiêu đề của một bài đăng đơn lẻ, sẽ an toàn khi cho rằng họ muốn… sử dụng hình ảnh đó làm hình nền CSS

Thậm chí, vẫn có một giải pháp thay thế tốt hơn, nhờ wp_add_inline_style[]

Một ví dụ thú vị có thể được tìm thấy trong chủ đề Twenty Fifteen, sử dụng Ảnh nổi bật trong điều hướng một bài đăng

kết thúc

Xin nhắc lại, không bao giờ có trường hợp CSS nội tuyến

Bạn cung cấp cho tôi [những gì bạn nghĩ là] một trường hợp sử dụng chắc chắn thành công cho CSS nội tuyến trong các chủ đề WordPress và tôi sẽ cung cấp cho bạn một giải pháp thay thế linh hoạt hơn nhiều với CSS bên ngoài hoặc bên trong

Kể từ giữa những năm 1990, các nhà phát triển web đã có quyền kiểm soát ngày càng tăng đối với việc trình bày các trang web mà họ phát triển. Điều này phần lớn là do sự ra đời của CSS [cascading style sheet] và việc áp dụng nó giữa các nhà cung cấp trình duyệt lớn, cả trong quá khứ và hiện tại. Mặc dù việc áp dụng đặc tả CSS không phải là không có vấn đề nhưng nó đã giúp các nhà phát triển web có thể xây dựng các trang web và giao diện người dùng hấp dẫn và giàu trí tưởng tượng. Kể từ khi CSS ra đời, đã có một số cách khác nhau để thay đổi cách trình bày các phần tử trong tài liệu HTML hoặc XML

Các kiểu có thể được khai báo trong một tệp riêng biệt và được liên kết từ tài liệu HTML. Các kiểu được khai báo trong tệp bên ngoài này sẽ được phân tích cú pháp và áp dụng cho các phần tử có liên quan trong tài liệu HTML;

Các kiểu có thể được nhúng trực tiếp vào tài liệu HTML. Các kiểu này phải được lồng giữa các thẻ và sẽ được áp dụng cho tài liệu HTML theo cách tương tự như các kiểu có trong biểu định kiểu bên ngoài;

Các kiểu có thể được nhúng trực tiếp vào các phần tử trong HTML bằng cách sử dụng thuộc tính kiểu. Các kiểu này được hiển thị theo cách tương tự như các kỹ thuật được xác định ở trên, mặc dù trên cơ sở từng phần tử.
```
This is a heading
```

Kỹ thuật đầu tiên được xác định ở trên nói chung là phương pháp ưa thích để tạo kiểu nội dung trên các trang web. Nó được nhiều người coi là giải pháp sạch nhất và dễ bảo trì nhất vì nó tạo thành sự tách biệt rõ ràng giữa cấu trúc [HTML] và kiểu dáng [CSS]. Phương thức thứ hai không được hoạt động khác với phương thức thứ nhất. Tuy nhiên, nó thể hiện một vấn đề tiềm ẩn về khả năng bảo trì vì HTML và các kiểu liên kết được liên kết chặt chẽ với nhau. Điều này có thể khiến việc phân chia công việc giữa các thành viên khác nhau trong nhóm trở nên khó khăn hơn và có thể làm phình to tệp HTML. Phương pháp thứ ba được xác định ở trên trình bày trường hợp có vấn đề nhất. Nếu các kiểu được nhúng trực tiếp vào các thành phần HTML bằng cách sử dụng thuộc tính kiểu thì HTML có thể trở nên khó đọc [và do đó khó duy trì] và có thể gây ra các vấn đề về khả năng truy cập cho một số khách truy cập vào trang web của bạn. Các phần sau cố gắng xác định một số vấn đề liên quan đến kiểu nội tuyến

khả năng bảo trì

Trong 20 năm qua, các chuyên gia trong lĩnh vực phát triển web phía máy khách đã bày tỏ lo ngại về việc sử dụng các kiểu nội tuyến. Các nhà phát triển thường thấy rằng việc duy trì các tài liệu HTML phức tạp trở nên khó khăn hơn đáng kể nếu một lượng lớn dữ liệu trình bày được nhúng trong nguồn tài liệu. Phương pháp ưa thích của nhiều người là sử dụng các biểu định kiểu bên ngoài. Các kiểu được khai báo trong biểu định kiểu bên ngoài được áp dụng bằng cách tham chiếu các loại phần tử, lớp và id duy nhất trong tài liệu HTML. Có thể nói rằng các kiểu được khai báo trong các biểu định kiểu bên ngoài là 'không phô trương' vì chúng không được liên kết chặt chẽ với các trang hoặc thành phần cụ thể. Đối với nhiều người, việc tách cấu trúc [HTML] và trình bày [CSS] này là một bước hợp lý để cải thiện khả năng bảo trì

khả năng tiếp cận

Một số người sẽ sử dụng biểu định kiểu tùy chỉnh khi duyệt internet. Những người bị mù màu nặng hoặc khiếm thị khác có thể gặp khó khăn khi đọc nội dung trực tuyến và rất có thể sẽ sử dụng biểu định kiểu tùy chỉnh. Biểu định kiểu tùy chỉnh được lưu trữ trên máy tính của người dùng và sẽ được họ sử dụng để xem nhiều [nếu không phải tất cả] trang web trên internet. Chúng giúp mọi người có thể xác định các kết hợp màu sắc và kích thước phông chữ giúp họ dễ dàng đọc nội dung trên các trang web một cách thoải mái. Các kiểu được nhúng hầu như sẽ luôn ghi đè các biểu định kiểu được liên kết bên ngoài [bao gồm các biểu định kiểu tùy chỉnh, do người dùng xác định]. Vì lý do này, nên tránh sử dụng các kiểu nội tuyến. Ví dụ: nếu kích thước phông chữ của tiêu đề được khai báo nội tuyến, một người cần làm cho phông chữ lớn hơn bằng cách sử dụng biểu định kiểu tùy chỉnh sẽ khó [nếu không muốn nói là không thể] làm như vậy. Điều này có thể ngăn mọi người truy cập nội dung trên trang web của bạn theo cách họ cảm thấy thoải mái nhất

Sự kết luận

Trong những năm gần đây, một số trình duyệt phổ biến nhất đã cho phép ghi đè BẤT KỲ kiểu nào trong một trang web [bao gồm cả kiểu nội tuyến]. Đây là một điều thực sự hứa hẹn cho khả năng tiếp cận. Tuy nhiên, những người gặp khó khăn khi sử dụng các trình duyệt cũ hơn hoặc ít phổ biến hơn có nhiều khả năng gặp sự cố với kiểu nội tuyến. Tóm lại, tôi mong các nhà phát triển lưu ý đến khả năng truy cập khi tạo các kiểu CSS cho các dự án phát triển web. Thực sự không khó để tách các kiểu CSS khỏi đánh dấu HTML. Thật ra, điều ngược lại khá đúng. Nếu các quy tắc CSS được khai báo trong biểu định kiểu bên ngoài, đánh dấu HTML kết quả có khả năng mang lại khả năng quản lý được cải thiện đáng kể giống như CSS thực tế được sử dụng để tạo kiểu cho trang web. Tuy nhiên, điều quan trọng hơn là ảnh hưởng của điều này đối với khả năng truy cập trang web của bạn. Nếu tất cả các kiểu được chứa trong biểu định kiểu được liên kết bên ngoài, mọi người sẽ có nhiều khả năng ghi đè cách trình bày mặc định của các phần tử trên trang. Điều này có khả năng giúp một số khách truy cập vào trang web của bạn tương tác với nội dung bên trong dễ dàng hơn

đọc thêm

Bắt đầu xây dựng khả năng truy cập vào các dự án của bạn ngay từ đầu để tiết kiệm thời gian và tiền bạc, đừng để nó tồn đọng và để nó tích tụ bụi. khoan nó trong

Nếu bạn muốn Nomensa giúp bạn giải quyết các thách thức về khả năng truy cập hoặc cung cấp cho bạn bản đánh giá khả năng truy cập trang web/ứng dụng dành cho thiết bị di động của bạn, vui lòng liên hệ

Bạn có thể gọi cho chúng tôi theo số +44 [0] 117 929 7333 hoặc gửi biểu mẫu ngắn này. Trong thời gian chờ đợi, hãy xem toàn bộ các dịch vụ truy cập web mà chúng tôi cung cấp

Nhược điểm CSS nội tuyến là gì?

Nhược điểm của CSS nội tuyến. Việc thêm các quy tắc CSS vào từng phần tử HTML sẽ mất thời gian và làm cho cấu trúc HTML của bạn trở nên lộn xộn . Rất khó để theo kịp, tái sử dụng và mở rộng quy mô. Kích thước và thời gian tải trang của bạn có thể bị ảnh hưởng bởi việc tạo kiểu cho nhiều thành phần.

Tại sao việc thêm CSS nội tuyến không được khuyến khích?

Lý do kỹ thuật chính là do nếu bạn sử dụng cùng một kiểu dáng ở hai vị trí trở lên trên các trang của mình, thì mã CSS nội tuyến giống nhau sẽ cần tồn tại trong nhiều bản sao. This in turn would make maintenance, especially changes to styling, essentially more difficult.

Nên tránh phong cách nội tuyến?

Kiểu nội tuyến, mặc dù chúng có mục đích, nhưng thường không phải là cách tốt nhất để duy trì trang web của bạn . Họ đi ngược lại mọi thông lệ tốt nhất. Kiểu nội tuyến không tách biệt nội dung khỏi thiết kế. Các kiểu nội tuyến hoàn toàn giống với phông chữ được nhúng và các thẻ thiết kế phức tạp khác mà các nhà phát triển hiện đại chống lại.

Sử dụng CSS nội tuyến có tốt hơn không?

CSS nội tuyến được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. Đối với kiểu CSS này, bạn chỉ cần thêm thuộc tính kiểu vào mỗi thẻ HTML mà không cần sử dụng bộ chọn. Loại CSS này không thực sự được khuyến nghị , vì mỗi thẻ HTML cần được tạo kiểu riêng. Việc quản lý trang web của bạn có thể trở nên quá khó khăn nếu bạn chỉ sử dụng CSS nội tuyến.