2010-01-28 27 views
5

Tôi đang phát triển một ứng dụng sử dụng tính phổ biến-xform. Trước đây tôi đã từng phục vụ các trang dưới dạng text/html với tài liệu XHTML 1.0.Bạn có thể tạo kiểu dáng các phần tử XHTML trong một không gian tên khác bằng cách sử dụng các bộ chọn css tên và lớp không?

Nếu tôi chuyển loại mime thành application/xhtml + xml, tôi sẽ thấy một cải tiến hiệu suất khá lớn, vì javascript có thể sử dụng hàm get ____ NS() thay vì những gì nó đang làm bây giờ (từ từ lặp qua toàn bộ Cây DOM mỗi khi cần chọn một phần tử).

Nhưng khi tôi thử điều này, một loạt CSS của tôi đã ngừng hoạt động. Tôi nhận thấy rằng khi tôi kiểm tra các phần tử, hoặc trong Firebug hoặc trong WebKit Nightly Web Inspector, điểm thất bại là '.classname' và '#id' css selectors trên các phần tử trong không gian tên XFORMS. Tôi cũng nhận thấy rằng trong các thuộc tính DOM được liệt kê cho các phần tử đó, chúng thiếu cả thuộc tính 'id' và 'className'.

Câu hỏi của tôi là, có cách nào để tôi có thể nhận được UA để nhận ra đây là các lớp và id không?

Những điều tôi đã cố gắng, không có kết quả:

  1. xác định "id" thuộc tính như ID trong ATTLIST một inline DOCTYPE của
  2. cố gắng mỗi loại tài liệu tôi có thể, hoặc không có loại tài liệu ở tất cả các
  3. đủ điều kiện thuộc tính id và tên lớp trong không gian tên xhtml (ví dụ: xhtml: id)

Dưới đây là một số mẫu xhtml. Không hoạt động trong cả hai trình duyệt Firefox 3.5 hoặc Safari 4/WebKit hàng đêm

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:xhtml="http://www.w3.org/1999/xhtml" 
    xmlns:xf="http://www.w3.org/2002/xforms"> 
<head> 
    <style type="text/css"> 
    /* <![CDATA[ */ 
    #test { 
     background-color: red; 
    } 
    .testing { 
     color: blue; 
    } 
    /* ]]> */ 
    </style> 
</head> 
<body> 
    <xf:group id="test" class="testing">Test</xf:group> 
</body> 

Trả lời

4

Frankie,

câu trả lời porneL là đúng - trong chế độ XHTML bạn phải sử dụng quy tắc CSS khác nhau, bởi vì có không có gì 'đặc biệt' về @id an @class.

Ngay cả với kiến ​​thức này, vấn đề của bạn vẫn chưa kết thúc.:)

Sự cám dỗ có thể là để chỉ cần đặt HTML và XHTML CSS selectors với nhau, và áp dụng chúng vào cùng một quy tắc:

@namespace xf url(http://www.w3.org/2002/xforms); 

xf\:input.surname, xf|input[class~="surname"] { 
    color: green; 
} 

Tuy nhiên, một vấn đề nữa là IE sẽ bỏ qua toàn bộ quy tắc, bởi vì nó không thích cú pháp XHTML. Vì vậy, rải rác thông qua Ubiquity XForms bạn sẽ thấy những thứ như thế này:

@namespace xf url(http://www.w3.org/2002/xforms); 

xforms\:hint.active, xf\:hint.active { 
    display: inline; 
} 

xf|hint[class~="active"] { 
    display: inline; 
} 

Như bạn thấy chúng ta phải lặp lại kiểu dáng với các bộ chọn khác nhau. (Đây là một cái gì đó chúng tôi hy vọng để giải quyết với một chức năng mà sẽ trừu tượng hiện nhiệm vụ phong cách thiết Sau đó, bạn sẽ chỉ phải viết một quy tắc..)

Lưu ý một vài điều thêm:

  • rằng các quy tắc HTML đang sử dụng ':' làm ký tự chữ (do đó là '\' để thoát) và không biết gì về không gian tên;
  • quy tắc CSS XHTML sử dụng toán tử '~ =', có nghĩa là thuộc tính phải chứa giá trị được chỉ định, thay vì chính xác bằng giá trị đó.
+0

Vì tôi đang phát triển một ứng dụng nội bộ, tôi đã được cấp quyền thiết lập các yêu cầu của trình duyệt, vì vậy IE không phải là vấn đề (cơ bản là Firefox 3.6 và Safari 4). Tôi đã hy vọng rằng tôi có thể tránh phải sửa đổi tất cả các kiểu, nhưng có vẻ như tôi không có nhiều lựa chọn. – Frankie

0

Bạn không có loại tài liệu, mã hóa ký tự, vv Ở đây bạn đi:

Thay đổi này chính xác:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <!--Always include character encoding and content-type--> 
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
</head> 
+0

Tôi cho rằng tôi có thể rõ ràng hơn, nhưng tôi không bao gồm những điều đó bởi vì họ dường như không tạo sự khác biệt về vấn đề của tôi. Ngay cả với loại tài liệu đó hoặc bất kỳ loại tài liệu XHTML hoặc HTML5 nào khác, sự cố vẫn tiếp diễn mà tôi không thể tạo kiểu cho các phần tử không nằm trong vùng tên xhtml với bộ chọn #ss và .classname css – Frankie

+0

Tôi cũng đã đọc rằng bạn không nên bao gồm một loại tài liệu nếu bạn đang phân phối nội dung dưới dạng ứng dụng/xhtml + xml, nhưng có vẻ như những người hợp lý khác nhau về chủ đề. Tôi không thực sự quan tâm một trong hai cách, miễn là tôi không phải chuyển đổi tất cả cáC#idname của tôi thành * | * [* | id = 'idname'] trong css hoặc bất cứ điều gì vô nghĩa nó sẽ yêu cầu – Frankie

+0

I don ' Tôi hiểu. Tôi chỉ cần sao chép mã chính xác của bạn vào Dreamweaver và thay thế đầu bằng phiên bản của tôi và nó hoạt động hoàn hảo trong Safari, và Firefox 3.5 (không thử nghiệm Chrome, IE6, et al). – orokusaki

1

Bạn không phải sử dụng bộ chọn #id/.class. Thay vào đó, bạn có thể sử dụng:

[id=test] {} 
[class|=testing] {} 

tương đương.

Lớp AFAIK là điều cụ thể cho HTML và bởi vì các không gian tên XML hoàn toàn mất trí, các thuộc tính XHTML không nằm trong vùng tên XHTML! Có lẽ bạn không may mắn với cái này.

Đối với ID bạn có thể thử xml:id, nhưng tôi chưa kiểm tra xem có điều gì thực sự hỗ trợ nó hay không.

Trong trường hợp bạn muốn để phù hợp với các yếu tố namespaced, đó là có thể với CSS Namespaces:

@namespace xf "http://www.w3.org/2002/xforms"; 
xf|group {} 
Các vấn đề liên quan