Biểu định kiểu tác nhân người dùng là gì?

499

Tôi đang làm việc trên một trang web trong Google Chrome. Nó hiển thị chính xác với các phong cách sau.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Điều quan trọng cần lưu ý là tôi đã không xác định những phong cách này. Trong các công cụ dành cho nhà phát triển Chrome, nó cho biết biểu định kiểu tác nhân người dùng thay cho tên tệp CSS.

Bây giờ nếu tôi gửi biểu mẫu và một số lỗi xác thực xảy ra, tôi nhận được biểu định kiểu sau:

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Các font-sizetừ những phong cách mới là đáng lo ngại thiết kế của tôi. Có cách nào để buộc các biểu định kiểu của tôi và nếu có thể, ghi đè hoàn toàn biểu định kiểu mặc định của Chrome không?

css  google-chrome 
— Kapil Sharma
nguồn
2
— givanse
7
Cũng lưu ý rằng trên Chrome (51), bạn chỉ nhận được hai mục nhập bảng đó khi bạn không có khai báo tài liệu. Nếu không, bạn chỉ có được thứ hai.
— John
Xóa bộ nhớ cache chrome trong nhiều công cụ hơn -> Xóa dữ liệu duyệt web
— doford
2
Bài viết liên quan ở đây . Hiểu cách biểu định kiểu tác nhân người dùng (hoặc trình duyệt) khác với biểu định kiểu người dùng và tác giả sẽ giúp khái niệm hóa mọi thứ một cách dễ dàng.
— RBT

Câu trả lời:

251

Các trình duyệt mục tiêu là gì? Các trình duyệt khác nhau đặt các quy tắc CSS mặc định khác nhau. Hãy thử bao gồm thiết lập lại CSS, chẳng hạn như thiết lập lại CSS meyerweb hoặc normalize.css , để xóa các mặc định đó. Google "thiết lập lại CSS so với bình thường hóa" để thấy sự khác biệt.

— Oliver Millington
nguồn
19
Tôi luôn đặt lại / bình thường hóa CSS của mình trước mỗi dự án, theo cách đó bạn có trường cấp độ "gần như" trên các trình duyệt. Tôi chưa bao giờ nghe nói về một "tác động phụ" tiêu cực như vậy, tôi chắc chắn nếu bạn có một cái nhìn nhanh trên Google, bạn sẽ thấy rằng nó được khuyến khích.
— Oliver Millington
2
Đặt lại kiểu có thể gây ra kết quả kỳ lạ với các trường biểu mẫu, đặc biệt là xung quanh viền trường hoặc các thành phần đa phần như type = "file".
— đối xử tốt với các mod của bạn vào
7
Mặc dù thiết lập lại / bình thường hóa có thể giúp ích, nhưng nó không thực sự trả lời câu hỏi, tại sao biểu định kiểu tác nhân người dùng đang thay đổi? Tôi có cùng một vấn đề khi các kiểu UA của chúng trở nên khác nhau đối với các trang được kết xuất sẵn mà tôi sử dụng cho SEO. Bất kỳ ý tưởng về lý do tại sao nó thay đổi?
— Yaron
5
Xem những gì Chrome đặt mặc định cho trang web: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
— Santosh Kumar
10
Đây không phải là một câu trả lời ... Thêm <!DOCTYPE>là chính xác bởi @Sebas
— Amit Shah
141

Nếu <!DOCTYPE>bị thiếu trong nội dung HTML của bạn, bạn có thể thấy rằng trình duyệt ưu tiên cho "biểu định kiểu tác nhân người dùng" trên biểu định kiểu tùy chỉnh của bạn. Thêm doctype sửa lỗi này.

— Jesper Mygind
nguồn
6
Đó là một gợi ý tuyệt vời. Bạn đã tiết kiệm cho tôi một chút thời gian nghiên cứu. Đáng lưu ý rằng trong trường hợp của tôi, tôi đã có tuyên bố doctype đó nhưng tôi đã có một kịch bản trước đó. Có vẻ như DOCTYPE phải xảy ra điều đầu tiên trong trang để xem xét.
— Sabas
3
Thêm <! DOCTYPE> đã giải quyết vấn đề căn chỉnh dọc tr / td rất kỳ lạ mà tôi gặp phải. Cảm ơn câu trả lời này.
— Ralph Tee
3
Đây là nitpicking, nhưng <! DOCTYPE html> đã khắc phục sự cố cho tôi.
— Steve Zelaznik
8
Tôi đã bật <! DOCTYPE html> nhưng vẫn phải bình thường hóa.
— antikbd
1
@ChrisMorgan trích dẫn từ thông số kỹ thuật mà bạn đã liên kết: "Cần có DOCTYPE vì lý do cũ. Khi bỏ qua, các trình duyệt có xu hướng sử dụng chế độ hiển thị khác không tương thích với một số thông số kỹ thuật. Bao gồm DOCTYPE trong tài liệu đảm bảo rằng trình duyệt tạo ra nỗ lực hết sức theo các thông số kỹ thuật có liên quan ". Trong một thế giới lý tưởng, DOCTYPE sẽ không cần thiết. Nhưng để khẳng định câu trả lời là "chỉ không đúng" thì IMHO khá táo bạo, đặc biệt là xem xét số lượng upvote.
— Jesper Mygind
104

Liên quan đến khái niệm về phong cách tác nhân người dùng, hãy tham khảo phần Cascade trong thông số CSS 2.1.

Biểu định kiểu tác nhân người dùng bị ghi đè bởi bất kỳ thứ gì bạn đặt trong biểu định kiểu của riêng bạn. Chúng chỉ là phần dưới cùng: trong trường hợp không có bất kỳ biểu định kiểu nào được cung cấp bởi trang hoặc bởi người dùng, trình duyệt vẫn phải hiển thị nội dung bằng cách nào đó và biểu định kiểu tác nhân người dùng chỉ mô tả điều này.

Vì vậy, nếu bạn nghĩ rằng bạn có vấn đề với biểu định kiểu tác nhân người dùng, thì bạn thực sự có vấn đề với đánh dấu hoặc biểu định kiểu của bạn hoặc cả hai (về điều bạn không viết gì).

— Jukka K. Korpela
nguồn
@givanse, không, bạn thấy hiệu ứng bảng kiểu tác nhân người dùng khi bạn không ghi đè lên chúng và đánh dấu mẫu của bạn cũng không ngoại lệ. Nó sẽ được phân tích cú pháp dưới dạng một liphần tử chứa hai ulphần tử chỉ có nội dung văn bản; chúng được tạo kiểu bởi biểu định kiểu tác nhân người dùng, nhưng kiểu này có thể bị ghi đè. (Việc đánh dấu có hợp lệ hay không tùy thuộc vào ngữ cảnh và phiên bản HTML; nhưng điều này không ảnh hưởng đến kiểu dáng.)
— Jukka K. Korpela
@givanse, vấn đề đó không liên quan đến câu hỏi về tờ giấy kiểu người dùng là gì. Nếu bạn nghĩ rằng vấn đề là quan trọng, hãy đăng nó dưới dạng một câu hỏi mới, với đầy đủ chi tiết. Nhưng viên đạn trong jsfiddle của bạn đơn giản là một viên đạn cho liphần tử và biểu định kiểu của bạn không ghi đè lên nó.
— Jukka K. Korpela
47

Đánh dấu tài liệu là HTML5 bằng loại tài liệu phù hợp trên dòng đầu tiên, đã giải quyết vấn đề của tôi.

<!DOCTYPE html>
<html>...
— Daniel
nguồn
8
Bạn có thể vui lòng giải thích chính xác làm thế nào nó được cho là làm việc? Làm thế nào HTML 5 được liên kết với các phong cách không xác định? Tôi sẽ xác nhận nhưng bạn có bất kỳ fiddle sẵn sàng để xác nhận nó?
— Kapil Sharma
28

Biểu định kiểu tác nhân người dùng là biểu định kiểu mặc định của người dùng, do trình duyệt cung cấp (ví dụ: Chrome, Firefox, Edge, v.v.) để trình bày trang theo cách đáp ứng mong đợi của bản trình bày chung. Ví dụ: một biểu định kiểu mặc định sẽ cung cấp các kiểu cơ sở cho những thứ như kích thước phông chữ, đường viền và khoảng cách giữa các thành phần. Thông thường sử dụng biểu định kiểu đặt lại để xử lý sự không nhất quán giữa các trình duyệt.

Từ đặc điểm kỹ thuật ...

Biểu định kiểu mặc định của tác nhân người dùng phải trình bày các yếu tố của ngôn ngữ tài liệu theo cách đáp ứng mong đợi trình bày chung cho ngôn ngữ tài liệu. ~ Cascade .

Để biết thêm thông tin về các tác nhân người dùng nói chung, xem tác nhân người dùng .

— Kenneth Stoddard
nguồn
15

Trả lời câu hỏi trong tiêu đề, biểu định kiểu tác nhân người dùng là gì, tập hợp các kiểu mặc định trong trình duyệt: Dưới đây là một số trong số chúng (và hầu hết các kiểu có liên quan trong web ngày nay):

Ý kiến ​​cá nhân: Đừng đấu tranh với họ. Chúng có các giá trị mặc định tốt, ví dụ, trong các trường hợp rtl / pricei và hiện nay là nhất quán. Đặt lại những gì bạn thấy không liên quan đến bạn, không phải tất cả chúng cùng một lúc.

— Ebrahim Byagowi
nguồn
12

Xác định các giá trị mà bạn không muốn được sử dụng từ kiểu tác nhân người dùng của Chrome trong nội dung CSS của riêng bạn.

— Bến
nguồn
4

Một số trình duyệt sử dụng cách riêng của họ để đọc tệp .css. Vì vậy, cách đúng để đánh bại điều này: Nếu bạn nhập dòng lệnh trực tiếp vào mã nguồn .html, thì điều này sẽ đánh bại tệp .css, theo cách đó, bạn đã nói trực tiếp với trình duyệt những gì cần làm và trình duyệt không đọc được các lệnh từ tệp .css. Hãy nhớ rằng các lệnh được ghi trong tệp .html mạnh hơn lệnh trong .css.

— rollin_jeksun
nguồn
1

Tôi gặp vấn đề tương tự như một trong những <div> của tôi có lề được đặt bởi trình duyệt. Điều đó khá khó chịu nhưng sau đó tôi đã hiểu ra như hầu hết mọi người nói, đó là một lỗi đánh dấu.

Tôi đã quay lại và kiểm tra phần <head> của mình và liên kết CSS của tôi như dưới đây:

<link rel="stylesheet" href="ex.css">

Tôi đã bao gồm typetrong đó và làm cho nó như dưới đây:

<link rel="stylesheet" type="text/css" href="ex.css">

Vấn đề của tôi đã được giải quyết.

— Appy Sharma
nguồn
0

Mỗi trình duyệt cung cấp một biểu định kiểu mặc định, được gọi là biểu định kiểu tác nhân người dùng, trong trường hợp tệp HTML không chỉ định một biểu định kiểu. Kiểu mà bạn chỉ định ghi đè mặc định.

Vì bạn chưa chỉ định giá trị cho hộp của thành phần bảng, nên các kiểu mặc định đã được áp dụng.

— người đầu tiên
nguồn
0

Tôi chỉ muốn mở rộng dựa trên phản hồi từ @BenM dựa trên những gì tôi đọc ở đây từ Ire Aderinokun. Vì biểu định kiểu tác nhân người dùng cung cấp kiểu dáng mặc định hữu ích, hãy suy nghĩ kỹ trước khi ghi đè lên nó.

Tôi đã gặp một lỗi ngớ ngẩn khi một yếu tố nút không đúng trong Chrome. Tôi đã tạo kiểu một phần vì tôi không muốn nó trông giống như một nút truyền thống. Tuy nhiên, tôi đã bỏ qua các yếu tố kiểu như viền, màu viền, v.v. Vì vậy, Chrome đang bước vào để cung cấp các phần mà nó nghĩ là tôi bị thiếu.

Vấn đề đã biến mất khi tôi thêm các kiểu như border: none, v.v.

Vì vậy, nếu bất cứ ai khác gặp phải vấn đề này, hãy đảm bảo rằng bạn đang ghi đè rõ ràng tất cả các kiểu tác nhân người dùng mặc định có thể áp dụng cho một phần tử nếu bạn nhận thấy nó trông có vẻ khó khăn, đặc biệt là nếu bạn không muốn đặt lại hoàn toàn các kiểu tác nhân người dùng. Nó làm việc cho tôi.

— Brent Miller
nguồn
Đây không phải là một bình luận thay vì một câu trả lời?
— Peter Mortensen
@PeterMortensen có, nhưng tôi không thể để lại nhận xét - không đủ danh tiếng.
— Brent Miller
-1

Tôi có cách này. Kiểm tra điều này:

lỗi

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

Chính xác 

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
— Đèn chùm Vinkal
nguồn
2
Vui lòng chỉnh sửa để giải thích cách thức này hoạt động và tại sao nó giúp.
— Yunnosch
-6

Đặt mã sau vào tệp CSS của bạn:

table {
    font-size: inherit;
}
— Srikanth
nguồn
2
Điều này không thực sự thêm bất cứ điều gì mới vào bài viết này. Hiện đã có câu trả lời được chấp nhận, cũng như 5 câu trả lời khác, vì vậy vui lòng không đăng câu trả lời muộn.
— Kaspar Lee
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.