Tại sao CSS hoạt động với các phần tử giả mạo?

441
Jordan ChillMcgee Ludgate 2013-12-04 04:19.

Trong lớp học của tôi, tôi đã chơi xung quanh và phát hiện ra rằng CSS hoạt động với các phần tử được tạo sẵn.

Thí dụ:

imsocool {
    color:blue;
}
<imsocool>HELLO</imsocool>

Khi giáo sư của tôi lần đầu tiên thấy tôi sử dụng cái này, ông ấy hơi ngạc nhiên khi các phần tử tạo thành hoạt động và đề nghị tôi chỉ cần thay đổi tất cả các phần tử tạo thành của mình thành các đoạn văn có ID.

Tại sao giáo sư của tôi không muốn tôi sử dụng các yếu tố đã tạo sẵn? Chúng hoạt động hiệu quả.

Ngoài ra, tại sao anh ấy không biết rằng các phần tử tạo thành tồn tại và hoạt động với CSS. Chúng không phổ biến?

19 answers

471
Quentin 2013-12-04 04:24.

Tại sao CSS hoạt động với các phần tử giả mạo?

(Hầu hết) các trình duyệt được thiết kế để (ở một mức độ nào đó) tương thích với các bổ sung trong tương lai cho HTML. Các phần tử không được công nhận được phân tích cú pháp thành DOM, nhưng không có ngữ nghĩa hoặc kết xuất mặc định chuyên biệt được liên kết với chúng.

Khi một phần tử mới được thêm vào đặc tả, đôi khi CSS, JavaScript và ARIA có thể được sử dụng để cung cấp chức năng tương tự trong các trình duyệt cũ hơn (và các phần tử phải xuất hiện trong DOM để các ngôn ngữ đó có thể thao tác với chúng để thêm chức năng đó ).

(Mặc dù cần lưu ý rằng công việc đang được tiến hành để xác định một phương tiện để mở rộng HTML với các phần tử tùy chỉnh , nhưng công việc này hiện đang trong giai đoạn phát triển ban đầu nên có lẽ nên tránh nó cho đến khi nó đã trưởng thành.)

Tại sao giáo sư của tôi không muốn tôi sử dụng các yếu tố đã tạo sẵn?

  • Chúng không được phép bởi đặc tả HTML
  • Chúng có thể xung đột với các phần tử tiêu chuẩn trong tương lai có cùng tên
  • Có thể có một phần tử HTML hiện có phù hợp hơn với nhiệm vụ

Cũng thế; tại sao anh ta không biết rằng các yếu tố tạo thành tồn tại và hoạt động với CSS. Chúng không phổ biến?

Đúng. Mọi người không sử dụng chúng vì chúng có những vấn đề trên.

99
Dan Grahn 2013-12-04 04:22.

TL; DR

  • Các thẻ tùy chỉnh không hợp lệ trong HTML. Điều này có thể dẫn đến các vấn đề kết xuất.
  • Làm cho việc phát triển trong tương lai trở nên khó khăn hơn vì mã không có tính di động.
  • HTML hợp lệ mang lại rất nhiều lợi ích như SEO, tốc độ và tính chuyên nghiệp.

Câu trả lời dài

một số lập luận rằng mã bằng thẻ tùy chỉnh dễ sử dụng hơn.

Tuy nhiên, nó dẫn đến HTML không hợp lệ. Điều đó không tốt cho trang web của bạn.

Điểm của CSS / HTML hợp lệ | StackOverflow

  • Google thích nó nên nó rất tốt cho SEO.
  • Nó làm cho trang web của bạn có nhiều khả năng hoạt động hơn trong các trình duyệt mà bạn chưa thử nghiệm.
  • Nó làm cho bạn trông chuyên nghiệp hơn (ít nhất là đối với một số nhà phát triển)
  • Các trình duyệt tuân thủ có thể hiển thị [HTML hợp lệ nhanh hơn]
  • Nó chỉ ra một loạt các lỗi khó hiểu mà bạn có thể đã bỏ qua ảnh hưởng đến những thứ bạn có thể chưa thử nghiệm, ví dụ như bộ mã hoặc bộ ngôn ngữ của trang.

Tại sao xác thực | W3C

  • Xác thực như một công cụ gỡ lỗi
  • Xác thực như một kiểm tra chất lượng có thể kiểm chứng trong tương lai
  • Xác thực giúp giảm bớt bảo trì
  • Xác thực giúp dạy các phương pháp hay
  • Xác thực là một dấu hiệu của sự chuyên nghiệp
68
Andrew Steitz 2013-12-04 06:38.

YADA (nhưng một câu trả lời khác (khác))

Chỉnh sửa: Vui lòng xem bình luận từ BoltClock bên dưới về loại so với thẻ và phần tử. Tôi thường không lo lắng về ngữ nghĩa nhưng nhận xét của anh ấy rất phù hợp và nhiều thông tin.

Mặc dù đã có rất nhiều câu trả lời tốt, nhưng bạn cho biết rằng giáo sư của bạn đã nhắc bạn đăng câu hỏi này để có vẻ như bạn đang (chính thức) đang đi học . Tôi nghĩ rằng tôi sẽ tìm hiểu sâu hơn một chút về không chỉ CSS mà còn về cơ chế của các trình duyệt web. Theo Wikipedia , "CSS là một ngôn ngữ style sheet sử dụng để mô tả ... một tài liệu viết bằng một ngôn ngữ đánh dấu." (Tôi đã thêm phần nhấn mạnh vào "a") Lưu ý rằng nó không nói "được viết bằng HTML" ít hơn nhiều là một phiên bản cụ thể của HTML. CSS có thể được sử dụng trên HTML, XHTML, XML, SGML, XAML, v.v. Tất nhiên, bạn cần một thứ gì đó sẽ hiển thị từng loại tài liệu này cũng sẽ áp dụng kiểu. Theo định nghĩa, CSS không biết / hiểu / quan tâm đến các thẻ ngôn ngữ đánh dấu cụ thể. Vì vậy, các thẻ có thể là "không hợp lệ" đối với HTML, nhưng không có khái niệm về thẻ / phần tử / loại "hợp lệ" trong CSS.

Các trình duyệt trực quan hiện đại không phải là các chương trình nguyên khối. Chúng là một hỗn hợp của các "động cơ" khác nhau có những công việc cụ thể phải làm. Ở mức tối thiểu, tôi có thể nghĩ đến 3 công cụ, công cụ kết xuất, công cụ CSS và công cụ javascript / VM. Không chắc liệu trình phân tích cú pháp là một phần của công cụ kết xuất (hoặc ngược lại) hay nó là một công cụ riêng biệt, nhưng bạn có ý tưởng.

Việc trình duyệt trực quan (các trình duyệt khác đã giải quyết thực tế là trình đọc màn hình có thể gặp các thách thức khác khi xử lý các thẻ không hợp lệ ) có áp dụng định dạng hay không phụ thuộc vào việc trình phân tích cú pháp có để thẻ "không hợp lệ" trong tài liệu hay không và sau đó công cụ kết xuất có áp dụng kiểu vào thẻ đó. Vì nó sẽ gây khó khăn hơn cho việc phát triển / bảo trì, các công cụ CSS không được viết để hiểu rằng "Đây là một tài liệu HTML, vì vậy đây là danh sách các thẻ / phần tử / loại hợp lệ." Các công cụ CSS chỉ cần tìm các thẻ / phần tử / loại và sau đó nói với công cụ kết xuất, "Đây là các kiểu bạn nên áp dụng." Công cụ kết xuất có quyết định thực sự áp dụng các kiểu hay không là do nó.

Đây là một cách dễ dàng để nghĩ về quy trình cơ bản từ bộ máy này sang bộ máy khác: phân tích cú pháp -> CSS -> kết xuất. Trong thực tế, nó phức tạp hơn nhiều nhưng điều này đủ tốt cho người mới bắt đầu.

Câu trả lời này đã quá dài nên tôi sẽ kết thúc ở đó.

54
GolezTrol 2013-12-04 04:23.

Các phần tử không xác định được divcác trình duyệt hiện đại coi là s. Đó là lý do tại sao chúng hoạt động. Đây là một phần của tiêu chuẩn HTML5 sắp ra mắt giới thiệu cấu trúc mô-đun mà các phần tử mới có thể được thêm vào.

Trong các trình duyệt cũ hơn (tôi nghĩ là IE7-), bạn có thể áp dụng một mẹo Javascript mà sau đó chúng cũng sẽ hoạt động.

Đây là một Sử dụng các thẻ HTML không xác định có được không? tôi đã tìm thấy khi tìm kiếm một ví dụ.

Đây là một Làm cách nào để "kích hoạt" các phần tử HTML5 trong IE 8 đã được chèn bởi lệnh gọi AJAX? . Hóa ra là IE7 thực sự không hỗ trợ các yếu tố này.

Cũng thế; tại sao anh ta không biết rằng các thẻ tạo sẵn tồn tại và hoạt động với CSS. Chúng không phổ biến?

Vâng, khá. Nhưng đặc biệt: chúng không phục vụ mục đích bổ sung. Và họ mới sử dụng html5. Trong các phiên bản trước của HTML, một thẻ không xác định không hợp lệ.

Ngoài ra, đôi khi giáo viên cũng có những lỗ hổng trong kiến ​​thức. Điều này có thể là do họ cần dạy cho sinh viên những kiến ​​thức cơ bản về một chủ đề nhất định, và việc biết tất cả thông tin chi tiết và thực sự cập nhật không thực sự có lợi. Tôi đã từng bị giam giữ vì một giáo viên cho rằng tôi đã lập trình vi-rút, chỉ vì tôi có thể khiến máy tính phát nhạc bằng playlệnh trong GWBasic. (Chuyện có thật, và có, lâu rồi). Nhưng dù lý do là gì, tôi nghĩ lời khuyên không nên sử dụng các phần tử sữa trứng là một lời khuyên đúng đắn.

27
Bas van Dijk 2013-12-04 04:24.

Trên thực tế, bạn có thể sử dụng các yếu tố tùy chỉnh. Đây là thông số kỹ thuật W3C về chủ đề này:

http://w3c.github.io/webcomponents/spec/custom/

Và đây là hướng dẫn giải thích cách sử dụng chúng:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Như đã chỉ ra bởi @Quentin: đây là một đặc tả nháp trong những ngày đầu phát triển và nó áp đặt các hạn chế về tên phần tử có thể là gì.

22
Ben Lesh 2013-12-05 05:16.

Có một số điều về các câu trả lời khác chỉ là diễn đạt kém hoặc có lẽ hơi không chính xác.

FALSE (ish): Các phần tử HTML không chuẩn là "không được phép", "bất hợp pháp" hoặc "không hợp lệ".

Không cần thiết. Chúng "không phù hợp" . Có gì khác biệt? Một cái gì đó có thể "không phù hợp" và vẫn được "cho phép". W3C sẽ không cử cảnh sát HTML đến nhà bạn và đưa bạn đi.

W3C đã để mọi thứ theo cách này là có lý do. Sự phù hợp và thông số kỹ thuật được xác định bởi một cộng đồng. Nếu bạn tình cờ có một cộng đồng nhỏ sử dụng HTML cho các mục đích cụ thể hơn và tất cả đều đồng ý về một số Phần tử mới mà họ cần để làm mọi thứ dễ dàng hơn, họ có thể có những gì W3C gọi là "các thông số kỹ thuật áp dụng khác" . (rõ ràng đây là một sự đơn giản hóa tổng thể, nhưng bạn hiểu rồi đấy)

Điều đó nói rằng, các trình xác thực nghiêm ngặt sẽ tuyên bố các phần tử không chuẩn của bạn là "không hợp lệ". nhưng đó là bởi vì công việc của trình xác thực là đảm bảo tuân thủ bất kỳ thông số kỹ thuật nào mà nó đang xác thực, chứ không phải để đảm bảo "tính hợp pháp" cho trình duyệt hoặc để sử dụng .

FALSE (ish): Các phần tử HTML không chuẩn sẽ dẫn đến sự cố hiển thị

Có thể, nhưng không chắc. (thay thế "will" bằng "might") Cách duy nhất điều này sẽ dẫn đến sự cố hiển thị là nếu phần tử tùy chỉnh của bạn xung đột với một thông số kỹ thuật khác, chẳng hạn như thay đổi đối với thông số kỹ thuật HTML hoặc một thông số kỹ thuật khác được áp dụng trong cùng một hệ thống (chẳng hạn như SVG, Toán học hoặc thứ gì đó tùy chỉnh).

Trên thực tế, lý do CSS có thể tạo kiểu cho các thẻ không chuẩn là vì đặc tả HTML nêu rõ rằng:

Tác nhân người dùng phải coi các phần tử và thuộc tính mà họ không hiểu là trung lập về mặt ngữ nghĩa; để chúng trong DOM (đối với bộ xử lý DOM) và tạo kiểu cho chúng theo CSS (đối với bộ xử lý CSS), nhưng không suy ra bất kỳ ý nghĩa nào từ chúng

Lưu ý: nếu bạn muốn sử dụng thẻ tùy chỉnh, chỉ cần nhớ thay đổi đối với thông số HTML sau này có thể làm hỏng phong cách của bạn, vì vậy hãy chuẩn bị. Tuy nhiên, thực sự không chắc rằng W3C sẽ triển khai <imsocool>thẻ.

Các thẻ và JavaScript không chuẩn (qua DOM)

Lý do bạn có thể truy cập và thay đổi các phần tử tùy chỉnh bằng JavaScript là vì đặc tả thậm chí còn nói về cách chúng nên được xử lý trong DOM , đây là API (thực sự khủng khiếp) cho phép bạn thao tác các phần tử trên trang của mình.

Giao diện HTMLUnknownElement phải được sử dụng cho các phần tử HTML không được xác định bởi đặc tả này (hoặc các thông số kỹ thuật áp dụng khác).

TL; DR: Việc tuân thủ các thông số kỹ thuật được thực hiện vì mục đích giao tiếp và an toàn. Mọi thứ vẫn cho phép không tuân thủ, trừ trình xác nhận , có mục đích duy nhất là thực thi sự phù hợp, nhưng việc sử dụng là tùy chọn.

Ví dụ:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(Tôi chắc rằng cái này sẽ vẽ ra ngọn lửa, nhưng tôi có 2 xu)

18
Explosion Pills 2013-12-04 04:42.

Theo thông số kỹ thuật:

CSS

Một công cụ chọn loại là tên của một loại yếu tố ngôn ngữ văn bản bằng cách sử dụng cú pháp của tên tiêu chuẩn CSS

Tôi nghĩ đây được gọi là bộ chọn phần tử , nhưng rõ ràng nó thực sự là bộ chọn kiểu . Thông số kỹ thuật tiếp tục nói về việc CSS qualified nameskhông hạn chế tên gọi thực sự là gì. Điều đó có nghĩa là miễn là bộ chọn loại phù hợp với cú pháp tên đủ điều kiện CSS thì đó là CSS đúng về mặt kỹ thuật và sẽ khớp với phần tử trong tài liệu. Không có giới hạn dành riêng cho CSS đối với các phần tử không tồn tại trong một thông số cụ thể - HTML hoặc cách khác.

HTML

Không có hạn chế chính thức về việc bao gồm bất kỳ thẻ nào trong tài liệu mà bạn muốn. Tuy nhiên, tài liệu nói rằng

Tác giả không được sử dụng các phần tử, thuộc tính hoặc giá trị thuộc tính cho các mục đích khác với mục đích ngữ nghĩa dự kiến ​​thích hợp của họ, vì làm như vậy sẽ ngăn phần mềm xử lý trang một cách chính xác.

Và sau đó nó nói

Tác giả không được sử dụng các yếu tố, thuộc tính hoặc giá trị thuộc tính không được phép trong đặc tả này hoặc các thông số kỹ thuật hiện hành khác, vì làm như vậy sẽ khiến ngôn ngữ khó được mở rộng hơn trong tương lai.

Tôi không chắc cụ thể về vị trí hoặc liệu thông số có cho phép các phần tử không xác định được phép hay không , nhưng nó nói về giao diện HTMLUnknownElement cho các phần tử không được công nhận. Một số trình duyệt thậm chí có thể không nhận ra các phần tử có trong thông số kỹ thuật hiện tại (có ý kiến ​​của IE8).

Mặc dù vậy, có một bản nháp cho các yếu tố tùy chỉnh , nhưng tôi nghi ngờ nó đã được triển khai ở bất kỳ đâu.

13
Josh Powell 2013-12-04 04:28.

Điều này có thể thực hiện được với html5 nhưng bạn cần xem xét các trình duyệt cũ hơn.

Nếu bạn quyết định sử dụng chúng sau đó, hãy đảm bảo BÌNH LUẬN html của bạn !! Một số người có thể gặp khó khăn trong việc tìm hiểu nó là gì nên một nhận xét có thể giúp họ tiết kiệm rất nhiều thời gian.

Một cái gì đó như thế này,

<!-- Custom tags in use, refer to their CSS for aid -->

Khi bạn tạo thẻ / phần tử tùy chỉnh của riêng mình, các trình duyệt cũ hơn sẽ không có manh mối nào giống như các phần tử html5 như nav/ section.

Nếu bạn quan tâm đến khái niệm này thì tôi khuyên bạn nên làm theo cách đúng đắn.

Bắt đầu

Phần tử tùy chỉnh cho phép các nhà phát triển web xác định các loại phần tử HTML mới. Thông số kỹ thuật là một trong số các nguyên tắc API mới hạ cánh dưới ô Thành phần Web, nhưng nó có thể là quan trọng nhất. Thành phần Web không tồn tại nếu không có các tính năng được mở khóa bởi các phần tử tùy chỉnh:

Xác định các phần tử HTML / DOM mới Tạo các phần tử mở rộng từ các phần tử khác Kết hợp hợp lý chức năng tùy chỉnh lại với nhau thành một thẻ duy nhất Mở rộng API của các phần tử DOM hiện có

Có rất nhiều điều bạn có thể làm với nó và nó làm cho kịch bản của bạn đẹp như bài viết này thích đưa nó vào. Phần tử tùy chỉnh xác định các phần tử mới trong HTML .

Vì vậy, hãy tóm tắt lại,

Ưu điểm

  • Rất thanh lịch và dễ đọc.

  • Thật tuyệt khi không gặp nhiều người như vậy divs. : p

  • Cho phép cảm nhận mã độc đáo

Nhược điểm

  • Hỗ trợ trình duyệt cũ hơn là một điểm mạnh cần xem xét.

  • Các nhà phát triển khác có thể không biết phải làm gì nếu họ không biết về các thẻ tùy chỉnh. (Giải thích cho họ hoặc thêm nhận xét để thông báo cho họ)

  • Cuối cùng một điều cần xem xét, nhưng tôi không chắc chắn, là các phần tử khối và nội tuyến. Bằng cách sử dụng thẻ tùy chỉnh, bạn sẽ phải viết nhiều css hơn vì thẻ tùy chỉnh sẽ không có mặt mặc định cho nó.

Sự lựa chọn hoàn toàn phụ thuộc vào bạn và bạn nên căn cứ vào những gì mà dự án đang yêu cầu.

Cập nhật 1/2/2014

Đây là một bài viết rất hữu ích mà tôi đã tìm thấy và nghĩ rằng tôi sẽ chia sẻ, Các yếu tố tùy chỉnh .

Tìm hiểu công nghệ Tại sao các yếu tố tùy chỉnh? Phần tử tùy chỉnh cho phép tác giả xác định các phần tử của riêng họ. Tác giả liên kết mã JavaScript với tên thẻ tùy chỉnh, sau đó sử dụng các tên thẻ tùy chỉnh đó giống như bất kỳ thẻ chuẩn nào.

Ví dụ: sau khi đăng ký một loại nút đặc biệt được gọi là siêu nút, hãy sử dụng nút siêu giống như sau:

Yếu tố tùy chỉnh vẫn là yếu tố. Chúng ta có thể tạo, sử dụng, thao tác và soạn chúng dễ dàng như bất kỳ tiêu chuẩn nào hoặc ngày nay.

Đây có vẻ như là một thư viện rất tốt để sử dụng nhưng tôi đã nhận thấy rằng nó không vượt qua trạng thái Xây dựng của Window. Tôi tin rằng đây cũng là giai đoạn tiền alpha nên tôi sẽ theo dõi trong khi nó phát triển.

4
tjons 2013-12-04 04:21.

Tại sao anh ấy không muốn bạn sử dụng chúng? Chúng không phổ biến và cũng không phải là một phần của tiêu chuẩn HTML5. Về mặt kỹ thuật, chúng không được phép. Họ là một hack.

Tôi thích chúng, mặc dù vậy. Bạn có thể quan tâm đến XHTML5. Nó cho phép bạn xác định các thẻ của riêng mình và sử dụng chúng như một phần của tiêu chuẩn.

Ngoài ra, như những người khác đã chỉ ra, chúng không hợp lệ và do đó không thể di động.

Tại sao anh ta không biết rằng chúng tồn tại? Tôi không biết, ngoại trừ việc chúng không phổ biến. Có thể anh ấy không biết rằng bạn có thể.

2
Guffa 2013-12-04 04:25.

Các thẻ tạo sẵn hầu như không được sử dụng vì không chắc rằng chúng sẽ hoạt động đáng tin cậy trong mọi trình duyệt hiện tại và mọi trình duyệt trong tương lai.

Trình duyệt phải phân tích cú pháp mã HTML thành các phần tử mà nó biết, các thẻ được tạo thành sẽ được chuyển đổi thành một thứ khác để phù hợp với mô hình đối tượng tài liệu (DOM). Vì các tiêu chuẩn web không bao gồm cách xử lý mọi nội dung nằm ngoài tiêu chuẩn, các trình duyệt web có xu hướng xử lý mã không độc lập theo những cách khác nhau.

Việc phát triển web đủ phức tạp với một loạt các trình duyệt khác nhau có những điểm kỳ quặc của riêng chúng, mà không thêm một yếu tố không chắc chắn khác. Tốt nhất bạn nên gắn bó với những thứ thực sự nằm trong tiêu chuẩn, đó là điều mà các nhà cung cấp trình duyệt cố gắng tuân theo, để điều đó có cơ hội tốt nhất để thực sự hoạt động.

2
runelynx 2013-12-04 04:21.

Tôi nghĩ rằng các thẻ tạo sẵn chỉ có khả năng gây nhầm lẫn hoặc không rõ ràng hơn so với thẻ p với ID (một số khối văn bản nói chung). Tất cả chúng ta đều biết ap với ID là một đoạn văn, nhưng mấy ai biết được các thẻ tạo thành nhằm mục đích gì? Ít nhất đó là suy nghĩ của tôi. :) Do đó, đây là vấn đề về phong cách / sự rõ ràng hơn là về chức năng.

2
drew_w 2013-12-04 10:27.

Những người khác đã có những điểm xuất sắc nhưng điều đáng chú ý là nếu bạn nhìn vào một khuôn khổ như AngularJS , có một trường hợp rất hợp lệ cho các phần tử và thuộc tính tùy chỉnh. Những điều này không chỉ truyền tải ý nghĩa ngữ nghĩa tốt hơn cho xml mà còn có thể cung cấp hành vi, giao diện cho trang web.

2
Hauke Ingmar Schmidt 2013-12-04 10:36.

CSS là một ngôn ngữ biểu định kiểu có thể được sử dụng để trình bày các tài liệu XML, không chỉ các tài liệu HTML (X). Đoạn mã của bạn với các thẻ đã tạo có thể là một phần của tài liệu XML hợp pháp; nó sẽ là một nếu bạn đặt nó trong một phần tử gốc duy nhất. Có lẽ bạn đã có một <html> ...</html>xung quanh nó? Bất kỳ trình duyệt hiện tại nào cũng có thể hiển thị các tài liệu XML.

Tất nhiên nó không phải là một tài liệu XML tốt, nó thiếu ngữ pháp và một khai báo XML. Thay vào đó, nếu bạn sử dụng tiêu đề khai báo HTML (và có thể là cấu hình máy chủ gửi đúng loại kịch câm) thì thay vào đó nó sẽ là HTML bất hợp pháp.

(X) HTML có lợi thế hơn so với XML thuần túy vì các phần tử có ý nghĩa ngữ nghĩa hữu ích trong ngữ cảnh của một bản trình bày trang web. Các công cụ có thể làm việc với ngữ nghĩa này, các nhà phát triển khác biết nghĩa, nó ít bị lỗi hơn và đọc tốt hơn.

Nhưng trong các ngữ cảnh khác, tốt hơn là sử dụng CSS với XML và / hoặc XSLT để trình bày. Đây là những gì bạn đã làm. Vì đây không phải là nhiệm vụ của bạn nên bạn không biết mình đang làm gì và HTML / CSS là cách tốt hơn để thực hiện hầu hết thời gian mà bạn nên gắn bó với nó trong kịch bản của mình.

Bạn nên thêm tiêu đề HTML (X) vào tài liệu của mình để các công cụ có thể cung cấp cho bạn các thông báo lỗi có ý nghĩa.

2
dennisbest 2013-12-05 13:05.

... Tôi chỉ đơn giản là thay đổi tất cả các thẻ đã tạo thành các đoạn văn có ID.

Tôi thực sự có vấn đề với đề xuất của anh ấy về cách làm điều đó đúng cách.

  1. Một <p>thẻ là cho đoạn văn. Tôi thấy mọi người sử dụng nó mọi lúc thay vì div - chỉ đơn giản là cho mục đích giãn cách hoặc vì nó có vẻ nhẹ nhàng hơn. Nếu nó không phải là một đoạn văn, đừng sử dụng nó.

  2. Bạn không cần hoặc không muốn gắn ID vào mọi thứ trừ khi bạn cần nhắm mục tiêu cụ thể (ví dụ: với Javascript). Sử dụng các lớp hoặc chỉ một div thẳng lên.

2
c-smile 2013-12-08 13:12.

Ngay từ những ngày đầu tiên, CSS đã được thiết kế để trở thành bất khả tri đánh dấu nên nó có thể được sử dụng với bất kỳ ngôn ngữ đánh dấu nào tạo ra các cấu trúc DOM giống như cây (ví dụ: SVG). Bất kỳ thẻ nào tuân thủ name tokensản xuất đều hoàn toàn hợp lệ trong CSS. Vì vậy, câu hỏi của bạn là về HTML hơn là về CSS.

Các phần tử có thẻ tùy chỉnh được hỗ trợ bởi đặc tả HTML5. HTML5 chuẩn hóa cách các phần tử không xác định phải được phân tích cú pháp trong DOM. Vì vậy, HTML5 là đặc tả HTML đầu tiên cho phép các yếu tố tùy chỉnh nói một cách chính xác. Bạn chỉ cần sử dụng loại <!DOCTYPE html>tài liệu HTML5 trong tài liệu của mình.

Đối với chính tên thẻ tùy chỉnh ...

Tài liệu này http://www.w3.org/TR/custom-elements/ đề xuất các thẻ tùy chỉnh mà bạn chọn để chứa ít nhất một biểu tượng '-' (gạch ngang). Bằng cách này, chúng sẽ không xung đột với các phần tử HTML trong tương lai. Do đó, bạn nên thay đổi tài liệu của mình thành một cái gì đó như sau:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body> 
2
Synetech 2013-12-08 14:56.

Đáng ngạc nhiên là không ai (kể cả bản thân tôi trước đây) đề cập đến khả năng tiếp cận. Một lý do khác mà việc sử dụng các thẻ hợp lệ thay vì các thẻ tùy chỉnh là để tương thích với lượng phần mềm lớn nhất, bao gồm trình đọc màn hình và các công cụ khác mà mọi người cần cho mục đích trợ năng. Hơn nữa, luật trợ năng như WAI yêu cầu tạo các trang web có thể truy cập được, điều này thường có nghĩa là yêu cầu chúng sử dụng đánh dấu hợp lệ.


Rõ ràng không ai đề cập đến nó, vì vậy tôi sẽ làm.

Đây là sản phẩm phụ của cuộc chiến trình duyệt .

Quay trở lại những năm 1990 khi Internet lần đầu tiên bắt đầu trở thành xu hướng chính thống, sự cạnh tranh gay gắt trên thị trường trình duyệt. Để duy trì tính cạnh tranh và thu hút người dùng, một số trình duyệt (đáng chú ý nhất Internet Explorer) đã cố gắng để thể hữu ích và “sử dụng” bằng cách cố gắng tìm ra những gì nhà thiết kế trang nghĩa và do đó cho phép đánh dấu mà không chính xác (ví dụ, <b><i>foobar</b></i>sẽ làm cho chính xác như bold- chữ in nghiêng).

Điều này có ý nghĩa ở một mức độ nào đó bởi vì nếu một trình duyệt liên tục phàn nàn về lỗi cú pháp trong khi trình duyệt khác ăn bất cứ thứ gì bạn ném vào nó và đưa ra kết quả đúng (nhiều hơn hoặc ít hơn), thì mọi người sẽ tự nhiên đổ xô đến cái sau.

Trong khi nhiều người nghĩ rằng cuộc chiến trình duyệt đã kết thúc, thì một cuộc chiến mới giữa các nhà cung cấp trình duyệt đã bùng phát trở lại trong vài năm qua kể từ khi Chrome được phát hành, Apple bắt đầu phát triển trở lại và thúc đẩy Safari, và IE mất vị trí thống trị. (Bạn có thể gọi đó là “chiến tranh lạnh” do sự hợp tác và hỗ trợ các tiêu chuẩn của các nhà cung cấp trình duyệt.) Do đó, không có gì ngạc nhiên khi ngay cả các trình duyệt hiện đại được cho là tuân thủ nghiêm ngặt các tiêu chuẩn web cũng thực sự cố gắng trở nên “thông minh” và cho phép hành vi phá vỡ tiêu chuẩn như thế này để cố gắng đạt được lợi thế như trước đây.

Thật không may, hành vi dễ dãi này đã dẫn đến sự phát triển lớn ( một số thậm chí có thể nói là ung thư) của các trang web được đánh dấu kém. Bởi vì IE là trình duyệt phổ biến và nhân hậu nhất, và do Microsoft liên tục đưa ra các tiêu chuẩn, IE trở nên nổi tiếng khi khuyến khích và quảng bá thiết kế xấu, đồng thời tuyên truyền và duy trì các trang bị hỏng.

Hiện tại, bạn có thể tránh xa việc sử dụng các câu đố và cách khai thác tương tự như vậy trên một số trình duyệt, nhưng ngoại trừ câu đố hoặc trò chơi không thường xuyên hoặc thứ gì đó, bạn phải luôn tuân thủ các tiêu chuẩn web khi tạo các trang và trang web để đảm bảo chúng hiển thị chính xác và tránh chúng bị hỏng (có thể bị bỏ qua hoàn toàn) với bản cập nhật trình duyệt.

1
Dan Green-Leipciger 2013-12-04 06:19.

Mặc dù các trình duyệt nói chung sẽ liên quan CSS với các thẻ HTML bất kể chúng có hợp lệ hay không, nhưng bạn TUYỆT ĐỐI KHÔNG làm điều này.

Về mặt kỹ thuật, không có gì sai với điều này từ góc độ CSS. Tuy nhiên, sử dụng các thẻ được tạo sẵn là điều bạn KHÔNG BAO GIỜ nên làm trong HTML.

HTML là một ngôn ngữ đánh dấu, có nghĩa là mỗi thẻ tương ứng với một loại thông tin cụ thể.

Các thẻ tạo thành của bạn không tương ứng với bất kỳ loại thông tin nào. Điều này sẽ tạo ra sự cố từ các trình thu thập dữ liệu web, chẳng hạn như Google.

Đọc thêm thông tin về tầm quan trọng của việc đánh dấu chính xác .

Biên tập

Div đề cập đến các nhóm gồm nhiều phần tử liên quan, có nghĩa là được hiển thị ở dạng khối và có thể được thao tác như vậy.

Khoảng cách đề cập đến các phần tử được tạo kiểu khác với ngữ cảnh mà chúng hiện đang ở và có nghĩa là được hiển thị nội tuyến, không phải dưới dạng một khối. Một ví dụ là nếu một vài từ trong câu cần được viết hoa toàn bộ.

Các thẻ tùy chỉnh không tương quan với bất kỳ tiêu chuẩn nào và do đó, span / div nên được sử dụng với các thuộc tính lớp / ID thay thế.

Có những trường hợp miễn trừ rất cụ thể cho điều này, chẳng hạn như Angular JS

0
The Spooniest 2013-12-06 08:37.

Mặc dù CSS có một thứ gọi là "công cụ chọn thẻ", nhưng nó không thực sự biết thẻ là gì. Điều đó còn lại để xác định ngôn ngữ của tài liệu. CSS được thiết kế để sử dụng không chỉ với HTML mà còn với XML, trong đó (giả sử bạn không sử dụng DTD hoặc lược đồ xác thực khác) các thẻ có thể là bất cứ thứ gì. Bạn cũng có thể sử dụng nó với các ngôn ngữ khác, mặc dù bạn sẽ cần phải đưa ra ngữ nghĩa của riêng mình để biết chính xác những thứ như "thẻ" và "thuộc tính" tương ứng với.

Các trình duyệt thường áp dụng CSS cho các thẻ không xác định trong HTML, vì điều này được coi là tốt hơn là phá vỡ hoàn toàn: ít nhất chúng có thể hiển thị một cái gì đó. Nhưng việc cố tình sử dụng thẻ "giả" là một việc làm rất tệ. Một lý do cho điều này là các thẻ mới được xác định theo thời gian và nếu một thẻ được xác định trông giống như thẻ giả của bạn nhưng không hoàn toàn hoạt động theo cách tương tự, điều đó có thể gây ra sự cố với trang web của bạn trên các trình duyệt mới.

0
ADJenks 2019-02-22 14:09.

Tại sao CSS hoạt động với các phần tử giả mạo? Bởi vì nó không làm tổn thương bất cứ ai bởi vì bạn không được phép sử dụng chúng.

Tại sao giáo sư của tôi không muốn tôi sử dụng các yếu tố đã tạo sẵn? Bởi vì nếu phần tử đó được xác định bởi một đặc tả trong tương lai, phần tử của bạn sẽ có một hành vi không thể đoán trước.

Ngoài ra, tại sao anh ấy không biết rằng các phần tử tạo thành tồn tại và hoạt động với CSS. Chúng không phổ biến? Bởi vì anh ấy, giống như hầu hết các nhà phát triển web khác, hiểu rằng chúng ta không nên sử dụng những thứ có thể hỏng một cách ngẫu nhiên trong tương lai.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Tất nhiên Luật sư mới của Harvey Weinstein là một người phụ nữ chỉ trích tôi

Tất nhiên Luật sư mới của Harvey Weinstein là một người phụ nữ chỉ trích tôi

Phiên tòa xét xử vụ tấn công tình dục bị trì hoãn nhiều của Harvey Weinstein dự kiến ​​sẽ bắt đầu lựa chọn bồi thẩm đoàn vào tháng 9, và với dự đoán, ông đã sắp xếp lại đội ngũ pháp lý của mình lần thứ ba. Có lẽ không thể tránh khỏi, các luật sư của anh ấy hiện bao gồm luật sư bào chữa Donna Rotunno, người nổi tiếng với việc đại diện cho những người đàn ông bị cáo buộc tấn công tình dục, đặt câu hỏi về phong trào MeToo nói chung và đã nói trong các cuộc phỏng vấn trước đây rằng giới tính của cô ấy cho phép cô ấy thoát khỏi "nọc độc" nhiều hơn khi kiểm tra chéo người tố cáo.

Cựu trợ lý của Harvey Weinstein nói rằng ông là 'kẻ thao túng bậc thầy'

Cựu trợ lý của Harvey Weinstein nói rằng ông là 'kẻ thao túng bậc thầy'

Trong một cuộc phỏng vấn với BBC News, trợ lý cũ của Harvey Weinstein, Zelda Perkins, nói rõ thực tế của việc chống lại ông trùm Hollywood. Cô ấy nói, về cơ bản là không thể.

Không có người chơi nào trên bầu trời của họ có cuộc chiến đầu tiên của họ và nó đã giết chết hoàn toàn một nền văn minh

Không có người chơi nào trên bầu trời của họ có cuộc chiến đầu tiên của họ và nó đã giết chết hoàn toàn một nền văn minh

Nguồn ảnh: AndyKrycek6 Những người hâm mộ No Man's Sky không thể chơi với nhau một cách chính xác, nhưng họ vẫn thích đến với nhau để ăn mừng cộng đồng của họ. Bằng cách nào đó, một kỳ nghỉ mới do người chơi tạo ra đã trở thành một câu chuyện về xung đột, phản bội và sự biến mất của cả một nền văn minh.

Cựu Giám đốc Thanh niên Bắc Carolina NAACP buộc tội Giám sát viên về hành vi quấy rối tình dục và cưỡng bức như thế nào Quốc gia xử lý yêu cầu của cô ấy

Cựu Giám đốc Thanh niên Bắc Carolina NAACP buộc tội Giám sát viên về hành vi quấy rối tình dục và cưỡng bức như thế nào Quốc gia xử lý yêu cầu của cô ấy

Jazmyne Childs đã khóc trong một cuộc họp báo vào ngày 25 tháng 9 năm 2019, khi cô ấy mô tả về hành vi quấy rối tình dục mà cô ấy nói rằng cô ấy đã phải chịu đựng khi làm việc cho phân hội Bắc Carolina của NAACP, ở Raleigh, N.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language