Sử dụng đường dẫn tài sản Rails 3.1 để sử dụng có điều kiện css nhất định

Tôi đang trong quá trình xây dựng ứng dụng Rails solo đầu tiên của mình bằng Rails 3.1.rc5. Vấn đề của tôi là tôi muốn trang web của mình hiển thị các tệp CSS khác nhau một cách có điều kiện. Tôi đang sử dụng Blueprint CSS và tôi đang cố gắng để sprockets / rails hiển thị screen.csshầu hết thời gian, print.csschỉ khi in và ie.csschỉ khi trang web được truy cập từ Internet Explorer.

Thật không may, *= require_treelệnh mặc định trong application.csstệp kê khai bao gồm mọi thứ trong assets/stylesheetsthư mục và dẫn đến một mớ lộn xộn CSS khó chịu. Cách giải quyết hiện tại của tôi là một loại phương pháp vũ phu trong đó tôi chỉ định mọi thứ riêng lẻ:

Trong application.css:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

Trong bảng định kiểu của tôi một phần (haml):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

Điều này hoạt động nhưng nó không đặc biệt đẹp. Tôi đã thực hiện một vài giờ tìm kiếm để thậm chí đi xa đến mức này nhưng tôi hy vọng rằng có một cách dễ dàng hơn để làm điều đó mà tôi vừa bỏ lỡ. Nếu tôi thậm chí có thể chọn lọc kết xuất một số thư mục nhất định (không bao gồm các thư mục con), nó sẽ làm cho toàn bộ quá trình trở nên cứng nhắc hơn rất nhiều.

Cảm ơn!

Tôi đã phát hiện ra một cách để làm cho nó bớt cứng nhắc và bằng chứng trong tương lai bằng cách vẫn sử dụng đường dẫn tài sản nhưng có các bảng định kiểu được nhóm lại. Nó không đơn giản hơn giải pháp của bạn, nhưng giải pháp này cho phép bạn tự động thêm các bảng định kiểu mới mà không phải chỉnh sửa lại toàn bộ cấu trúc.

Những gì bạn muốn làm là sử dụng các tệp kê khai riêng biệt để phá vỡ mọi thứ. Trước tiên, bạn phải sắp xếp lại app/assets/stylesheetsthư mục của bạn :

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

Sau đó, bạn chỉnh sửa ba tệp kê khai:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

Tiếp theo bạn cập nhật tệp bố cục ứng dụng của mình:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

Cuối cùng, đừng quên đưa các tệp kê khai mới này vào cấu hình / môi trường / sản xuất.rb:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

Cập nhật:

Như Max đã chỉ ra, nếu bạn theo cấu trúc này, bạn phải chú ý đến các tham chiếu hình ảnh. Bạn có một vài lựa chọn:

1. Di chuyển hình ảnh theo cùng một mẫu
   • Lưu ý rằng điều này chỉ hoạt động nếu hình ảnh không được chia sẻ
   • Tôi hy vọng đây sẽ không phải là khởi đầu cho hầu hết vì nó làm phức tạp mọi thứ quá nhiều
2. Đủ điều kiện đường dẫn hình ảnh:
   • background: url('/assets/image.png');
3. Sử dụng trình trợ giúp SASS:
   • background: image-url('image.png');

Đã đến vấn đề này ngày hôm nay.

Cuối cùng, việc đặt tất cả các bảng định kiểu cụ thể của IE vào lib / nội dung / biểu định kiểu và tạo một tệp kê khai cho mỗi phiên bản IE. Sau đó, trong application.rb thêm chúng vào danh sách những thứ cần biên dịch trước:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

Và trong bố cục của bạn, có điều kiện bao gồm các tệp kê khai đó và bạn tốt để đi!

Đó là một cách khá gọn gàng để làm điều đó. Tôi sử dụng các lớp có điều kiện trên html hoặc Modernizr. Xem bài viết này cho một đại diện tốt về những gì làm những gì. Modernizr-vs-cond condition-class-on-html