Làm thế nào để chuyển đổi trái và phải trong một tập tin css?

Tôi có trang mẫu django HTML có cả RTL và LTR (tùy thuộc vào ngôn ngữ của người dùng).Làm thế nào để chuyển đổi trái và phải trong một tập tin css?

CSS của trang này được lưu trữ trong một tệp khác và tệp đó hiện đang tĩnh.

Cách tốt nhất để chuyển thuộc tính sang trái và phải theo ngôn ngữ là gì? Có một thuộc tính được xây dựng trong CSS cho vấn đề này? (Tôi không muốn sử dụng JS, nó cảm thấy quá lộn xộn)

tôi có:

.elem{ 
    left: 10px; 
    bottom: 10px; 
    position: absolute; 
}

Tôi muốn một cái gì đó như thế này:

.elem{ 
    right-or-left-according-to-html-dir: 10px; 
    bottom: 10px; 
    position: absolute; 
}

Hiện nay lựa chọn duy nhất tôi có thể nghĩ ra cũng đang chuyển tệp thành một mẫu:

.elem{ 
    {{dir}}: 10px; 
    bottom: 10px; 
    position: absolute; 
}

Có cách nào tốt hơn để tôi giữ tệp CSS của mình tĩnh không?

Nguồn

2012-04-29 Uri

Tốt câu hỏi. Đây thực sự là một vấn đề. Giải pháp của Mozilla là phát minh ra các thuộc tính mới như [-moz-padding-start] (https://developer.mozilla.org/en/CSS/-moz-padding-start) và các cộng sự, nhưng tất nhiên điều đó sẽ không hoạt động ở bất cứ đâu khác. –

Bạn nói rằng bạn đang làm tài liệu rtl hoặc ltr tùy thuộc vào ngôn ngữ. Trong trường hợp đó, bạn có thể sử dụng bộ chọn :lang() để làm cho một số phần nhất định của tài liệu của bạn có kiểu dáng tùy thuộc vào ngôn ngữ.

Nếu bạn muốn có một chút hỗ trợ nhiều hơn (IE7 +), bạn có thể sử dụng bộ chọn thuộc tính selector[lang='en'] dù rằng sẽ chỉ kiểm tra các thuộc tính trên bộ chọn định.

http://www.w3.org/TR/css3-selectors/#attribute-selectors

Nếu bạn chỉ định ngôn ngữ trong các yếu tố html (mà bạn nên, với lang="en" ví dụ), bạn có thể chỉ cần đặt bộ chọn html ở phía trước của lớp học mà bạn muốn áp dụng trong một số miền địa phương:

.elem { 
    margin: 0 10px 0 0; 
    color: blue; 
} 

html[lang='en'] .elem { 
    margin: 0 0 0 10px; 
}

Thậm chí tốt hơn nếu bạn chỉ định thuộc tính dir bạn có thể trực tiếp sử dụng mà trong css như sau:

.elem[dir='rtl'] { 
    margin: 0 10px 0 0; 
}

Xin lưu ý rằng với một lớp học trên phần tử cơ thể, bạn sẽ luôn phụ thuộc vào lớp học đó luôn ở đó. Nhưng thuộc tính dir và lang có thể được chỉ định trên một phạm vi cụ thể hơn, như một div duy nhất và vẫn được sử dụng trong css cùng với các kiểu cho chỉ đường đọc 'khác'.

Sửa

Cuối cùng, để nhìn vào tương lai, các Selectors CSS 'Cấp 4' sẽ bao gồm một thẻ psuedo mà sẽ có thể lọc trên directionality văn bản. Tất nhiên các thông số kỹ thuật đang được phát triển và áp dụng bởi các trình duyệt có thể mất nhiều năm trước khi nó có thể đáng tin cậy sử dụng nó:

http://dev.w3.org/csswg/selectors4/#dir-pseudo

Nguồn

2012-04-29 16:21:01 sg3s

Làm thế nào về việc thêm hướng tới yếu tố cơ thể của bạn thông qua một lớp học đặc biệt, sau đó bạn có thể viết selectors theo:

<body class="rtl">

và trong CSS:

.rtl .myclass { 
    text-align: right; 
}

Nguồn

2012-04-29 15:30:49 Joscha

Làm thế nào để chuyển đổi trái và phải trong một tập tin css?

Trả lời

Các vấn đề liên quan