- CẬP NHẬT CHO CATALINA & SAFARI 13 (Cập nhật đầu năm 2020) *
LƯU Ý: Bộ lọc và trình biên dịch (chẳng hạn như công cụ SASS) mong đợi mã 'trình duyệt chéo' tiêu chuẩn - KHÔNG phải các bản hack CSS như thế này có nghĩa là chúng sẽ viết lại, phá hủy hoặc xóa các bản hack vì đó không phải là bản hack. Phần lớn đây là mã không chuẩn đã được tạo ra một cách tỉ mỉ để chỉ nhắm mục tiêu các phiên bản trình duyệt duy nhất và không thể hoạt động nếu chúng bị thay đổi. Nếu bạn muốn sử dụng nó với, bạn phải tải bản hack CSS đã chọn SAU bất kỳ bộ lọc hoặc trình biên dịch nào . Điều này có vẻ như được đưa ra nhưng đã có rất nhiều nhầm lẫn giữa những người không nhận ra rằng họ đang hoàn tác một vụ hack bằng cách chạy nó thông qua phần mềm như vậy không được thiết kế cho mục đích này.
Safari đã thay đổi kể từ phiên bản 6.1, như nhiều người đã nhận thấy.
Xin lưu ý: nếu bạn đang sử dụng Chrome [và giờ là Firefox] trên iOS (ít nhất là trong phiên bản iOS 6.1 trở lên) và bạn tự hỏi tại sao không có bản hack nào có thể tách Chrome khỏi Safari, đó là vì phiên bản Chrome của iOS đang sử dụng công cụ Safari. Nó sử dụng hack Safari chứ không phải Chrome. Thông tin thêm về điều đó tại đây: https://allthingsd.com/20120628/googles-chrom-for-ios-is-more-like-a-chrom-plated-apple/ Firefox cho iOS đã được phát hành vào mùa thu năm 2015. Nó cũng đáp ứng Safari Hacks, nhưng không ai trong số Firefox, giống như Chrome Chrome.
CSONG: Nếu bạn đã thử một hoặc nhiều bản hack và gặp sự cố khiến chúng hoạt động, vui lòng đăng mã mẫu (tốt hơn là trang thử nghiệm) - bản hack bạn đang thử và trình duyệt (phiên bản chính xác!) đang sử dụng cũng như thiết bị bạn đang sử dụng. Không có thông tin bổ sung đó, tôi hoặc bất kỳ ai khác ở đây không thể hỗ trợ bạn.
Thường thì nó là một sửa chữa đơn giản hoặc một dấu chấm phẩy bị thiếu. Với CSS, thông thường hoặc vấn đề về thứ tự mã được liệt kê trong biểu định kiểu, nếu không chỉ là lỗi CSS. Vui lòng kiểm tra các bản hack ở đây trên trang web thử nghiệm. Nếu nó hoạt động ở đó, điều đó có nghĩa là hack thực sự đang hoạt động cho thiết lập của bạn, nhưng đó là một thứ khác cần được giải quyết. Mọi người ở đây thực sự thích giúp đỡ, hoặc ít nhất là chỉ cho bạn đi đúng hướng.
Trang web thử nghiệm:
https://browserstranguity.bitbucket.io/css_hacks.html#safari
VÀ MIRROR!
https://browserstranguity.github.io/css_hacks.html#safari
Đây là cách để bạn sử dụng cho các phiên bản Safari mới hơn.
Bạn nên thử cái này trước vì nó bao gồm các phiên bản Safari hiện tại và chỉ thuần Safari:
Cái này vẫn hoạt động đúng với Safari 13 (đầu năm 2020):
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Để bao gồm nhiều phiên bản hơn, 6.1 trở lên, tại thời điểm này, bạn phải sử dụng cặp hack css tiếp theo. Một cho 6.1-10.0 đi với một xử lý 10.1 trở lên.
Vì vậy, sau đó - đây là một cái tôi đã làm cho Safari 10.1+:
Truy vấn phương tiện kép rất quan trọng ở đây, đừng xóa nó.
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Hãy thử cái này nếu SCSS hoặc bộ công cụ khác gặp sự cố với truy vấn phương tiện lồng nhau:
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Cái tiếp theo này hoạt động cho 6.1-10.0 nhưng không phải 10.1 (cập nhật cuối tháng 3 năm 2017)
Bản hack này tôi đã tạo ra trong nhiều tháng thử nghiệm và thử nghiệm bằng cách kết hợp nhiều bản hack khác.
GHI CHÚ: như trên, truy vấn phương tiện kép KHÔNG phải là một tai nạn - nó loại trừ nhiều trình duyệt cũ hơn không thể xử lý lồng nhau truy vấn phương tiện. - Không gian bị thiếu sau một trong những 'và cũng quan trọng. Rốt cuộc, đây là một bản hack ... và là bản duy nhất hoạt động cho 6.1 và tất cả các phiên bản Safari mới hơn tại thời điểm này. Ngoài ra, hãy lưu ý như được liệt kê trong các bình luận bên dưới, hack là css không chuẩn và phải được áp dụng SAU một bộ lọc. Các bộ lọc như công cụ SASS sẽ viết lại / hoàn tác hoặc loại bỏ hoàn toàn nó.
Như đã đề cập ở trên, vui lòng kiểm tra trang thử nghiệm của tôi để xem nó hoạt động như cũ (không sửa đổi!)
Và đây là mã:
/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Để biết thêm CSS Safari phiên bản cụ thể, vui lòng tiếp tục đọc bên dưới.
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Một cho Safari 11.0:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Một cho Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Công việc sửa đổi một chút cho 10.1 (chỉ):
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Safari 10.0 (Thiết bị không phải iOS):
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Hacks CSS 9:
Một tính năng đơn giản hỗ trợ hack truy vấn cho Safari 9.0 trở lên:
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Cách hack gạch dưới đơn giản cho Safari 9.0 trở lên:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Một số khác cho Safari 9.0 trở lên:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
và một truy vấn tính năng hỗ trợ khác nữa:
/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Một cho Safari 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 hiện bao gồm tính năng phát hiện để chúng tôi có thể sử dụng ngay bây giờ ...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Bây giờ chỉ nhắm mục tiêu thiết bị iOS. Như đã đề cập ở trên, vì Chrome trên iOS được bắt nguồn từ Safari, nên dĩ nhiên nó cũng đạt được điều đó.
/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
một cho Safari 9.0+ nhưng không phải cho thiết bị iOS:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Và một cho Safari 9.0-10.0 nhưng không phải cho thiết bị iOS:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Dưới đây là các bản hack tách riêng 6.1-7.0 và 7.1+ Chúng cũng yêu cầu kết hợp nhiều bản hack để có kết quả đúng:
/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
Vì tôi đã chỉ ra cách chặn các thiết bị iOS, đây là phiên bản sửa đổi của Safari 6.1+ hack nhắm vào các thiết bị không phải iOS:
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Để sử dụng chúng:
<div class="safari_only">This text will be Blue in Safari</div>
Thông thường [như trong câu hỏi này] lý do mọi người hỏi về hack Safari chủ yếu liên quan đến việc tách nó khỏi Google Chrome (một lần nữa KHÔNG phải iOS!) Điều quan trọng là phải đăng bài thay thế: cách nhắm mục tiêu Chrome riêng biệt với Safari, vì vậy Tôi đang cung cấp cho bạn ở đây trong trường hợp cần thiết.
Dưới đây là những điều cơ bản, một lần nữa hãy kiểm tra trang thử nghiệm của tôi để biết nhiều phiên bản cụ thể của Chrome, nhưng những phiên bản này bao gồm Chrome nói chung. Chrome là phiên bản 45, phiên bản Dev và Canary lên đến phiên bản 47 tại thời điểm này.
Bộ kết hợp truy vấn phương tiện cũ của tôi, tôi đã cài đặt trên trình duyệt vẫn hoạt động chỉ dành cho Chrome 29+:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Truy vấn tính năng @supports hoạt động tốt cho Chrome 29+ cũng như ... phiên bản sửa đổi của phiên bản chúng tôi đang sử dụng cho Chrome 28+ bên dưới. Safari 9, các trình duyệt Firefox sắp tới và trình duyệt Microsoft Edge không được chọn với trình duyệt này:
/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Trước đây, Chrome 28 và mới hơn rất dễ nhắm mục tiêu. Đây là một cái tôi đã gửi cho các trình duyệt sau khi thấy nó được bao gồm trong một khối mã CSS khác (ban đầu không nhằm mục đích hack CSS) và nhận ra nó làm gì, vì vậy tôi đã trích xuất phần có liên quan cho mục đích của chúng tôi:
[LƯU Ý:] Phương pháp cũ hơn này bên dưới bây giờ sẽ hiển thị Safari 9 và trình duyệt Microsoft Edge mà không cần cập nhật ở trên. Các phiên bản sắp tới của Firefox và Microsoft Edge đã thêm hỗ trợ cho nhiều mã -webkit- CSS trong lập trình của họ và cả Edge và Safari 9 đều có thêm hỗ trợ cho phát hiện tính năng @supports. Chrome và Firefox đã bao gồm @supports trước đây.
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
Khối phiên bản Chrome 22-28 (Nếu cần để hỗ trợ các phiên bản cũ hơn) cũng có thể nhắm mục tiêu với một nút xoắn trên các bản hack kết hợp Safari của tôi, tôi đã đăng ở trên:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
Giống như các bản hack định dạng Safari CSS ở trên, chúng có thể được sử dụng như sau:
<div class="chrome_only">This text will be Blue in Chrome</div>
Vì vậy, bạn không phải tìm kiếm nó trong bài viết này, đây là trang thử nghiệm trực tiếp của tôi một lần nữa:
https://browserstranguity.bitbucket.io/css_hacks.html#safari
[Hoặc Gương]
https://browserstranguity.github.io/css_hacks.html#safari
Trang thử nghiệm cũng có nhiều trang khác, đặc biệt dựa trên phiên bản để tiếp tục giúp bạn phân biệt giữa Chrome và Safari và cũng có nhiều bản hack cho trình duyệt web Firefox, Microsoft Edge và Internet Explorer.
LƯU Ý: Nếu có điều gì đó không phù hợp với bạn, trước tiên hãy kiểm tra trang thử nghiệm, nhưng cung cấp mã ví dụ và KHI hack mà bạn đang cố gắng để bất kỳ ai hỗ trợ bạn.