Có cách nào để tạo mã CSS3 qua trình duyệt DRY không?

Question

Khi tôi muốn tạo ra một nền gradient trong CSS3 tôi phải làm điều này:

background-color: #3584ba; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#54a0ce), to(#3584ba)); /* Safari 4+, Chrome */ 
background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */ 
background-image: -moz-linear-gradient(top, #54a0ce, #3584ba); /* FF3.6 */ 
background-image:  -o-linear-gradient(top, #54a0ce, #3584ba); /* Opera 11.10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54a0ce', endColorstr='#3584ba'); /* IE */ 

và điều này thực sự gây phiền nhiễu. Có một giải pháp tốt hơn, ví dụ như một plugin jQuery, mà sẽ làm cho mã của tôi qua trình duyệt tương thích, nếu tôi chỉ sử dụng:

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); /* Safari 5.1+, Chrome 10+ */ 

chẳng hạn? Có công cụ nào giúp tôi viết mã CSS3 dễ dàng hơn không?

Answer 1

Có nhiều công cụ cho việc này:

• http://lesscss.org/
• http://leafo.net/lessphp/
• http://sass-lang.com/
• http://compass-style.org/

Đây là những thường được gọi là preprocessors CSS.

Bạn sẽ kết thúc viết một cái gì đó như thế này một lần, giống như một định nghĩa hàm (thường được gọi là "mixin"):

.linear-gradient(@start, @end) { 
    background-color: @end; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Safari 4+, Chrome */ 
    background-image: -webkit-linear-gradient(top, @start, @end); /* Safari 5.1+, Chrome 10+ */ 
    background-image: -moz-linear-gradient(top, @start, @end); /* FF3.6 */ 
    background-image:  -o-linear-gradient(top, @start, @end); /* Opera 11.10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@start', endColorstr='@end'); /* IE */ 
} 

Sau đó, để áp dụng:

.my-class { 
    .linear-gradient(#54a0ce, #3584ba); 
} 
.my-other-class { 
    .linear-gradient(#ccc, #aaa); 
} 

cao đề nghị.

Answer 2

Bạn luôn có thể sử dụng một công cụ trực tuyến để tạo ra chúng cho bạn:

http://www.colorzilla.com/gradient-editor/

http://www.css3maker.com/css-gradient.html

Answer 3

Có một giải pháp tốt hơn, ví dụ một plugin jquery, mà sẽ làm cho mã của tôi tương thích trình duyệt chéo

Đối với giải pháp phía máy khách, bạn có thể sử dụng http://lea.verou.me/prefixfree/

Tập lệnh cho phép bạn chỉ sử dụng các thuộc tính CSS không cố định ở mọi nơi. Nó hoạt động sau hậu trường, thêm tiền tố của trình duyệt hiện tại vào bất kỳ mã CSS nào , chỉ khi cần.

Sau đó bạn sẽ chỉ cần sử dụng chức năng không tiền tố, đó là một cách bí ẩn mất tích từ CSS của bạn:

background-image: linear-gradient(top, #54a0ce, #3584ba); 

Answer 4

Tôi tìm thấy câu trả lời cho câu hỏi này. Nó là một chương trình được gọi là "autoprefixer", nó miễn phí, và nó sử dụng Grunt (cũng như một vài thứ khác). Bạn cung cấp cho nó tệp hoặc thư mục với css chưa được chỉnh sửa và tự động thêm tiền tố dựa trên các trình duyệt cụ thể mà bạn muốn nhắm mục tiêu và xuất chúng trong một tệp mới. Đây là một bài viết về cách sử dụng nó.

bài viết về Autoprefixer bởi tác giả: http://css-tricks.com/autoprefixer/ Làm thế nào để sử dụng Grunt cho người mới bắt đầu tuyệt đối: http://24ways.org/2013/grunt-is-not-weird-and-hard/ Sau đó, bạn có thể nhìn nó lên trên Github để tìm readme.

Tôi đang tìm kiếm chính xác điều tương tự, và đây là giải pháp tốt nhất mà tôi thấy rằng chỉ cần xử lý CSS thông thường. Tôi hy vọng rằng sẽ giúp.

Answer 5

https://autoprefixer.github.io/ Hãy thử cái này. Điều này không nhất thiết giúp bạn viết mã dễ dàng hơn, nó không phải là thư viện javascript. Nhưng nó thêm tiền tố của nhà cung cấp và loại bỏ mã css vô dụng.

background-image: -webkit-linear-gradient(top, #54a0ce, #3584ba); 
background-image: linear-gradient(top, #54a0ce, #3584ba); 

Đưa mã của bạn vào, đó là kết quả tôi nhận được. (Tôi đã xóa -webkit- khỏi mã ban đầu để nhận kết quả đó).