Giá trị của đơn vị css 'ex' là gì?

(Đừng nhầm với Xunit , một thư viện thử nghiệm đơn vị .Net phổ biến.)

Hôm nay trong cơn buồn chán, tôi bắt đầu kiểm tra DOM của Gmail (vâng, tôi rất chán).

Mọi thứ trông khá đơn giản cho đến khi tôi nhận thấy một thông số kỹ thuật thú vị về chiều rộng của các phần tử nhất định. Các Googlite lừng lẫy đã chỉ định một số cột bảng bằng cách sử dụng đơn vị 'ex' hiếm.

width: 22ex;

Lúc đầu, tôi cảm thấy bối rối ("'ex' là gì?"), Sau đó tôi quay lại: Tôi dường như nhớ ra điều gì đó từ nhiều năm trước khi lần đầu tiên tôi học về CSS. Từ thông số CSS3 :

[ Đơn vị cũ là] bằng chiều cao x đã sử dụng của phông chữ có sẵn đầu tiên . Chiều cao x được gọi như vậy vì nó thường bằng chiều cao của chữ "x" viết thường. Tuy nhiên, một 'ex' được xác định ngay cả đối với các phông chữ không chứa "x".

Tốt và tốt. Nhưng tôi chưa bao giờ thực sự thấy nó được sử dụng trước đây (bản thân tôi ít sử dụng nó hơn nhiều). Tôi sử dụng chúng khá phổ biến và đánh giá cao giá trị của chúng, nhưng tại sao lại là "ex"? Nó có vẻ ít tiêu chuẩn hơn một phép đo so với em và ít hữu ích hơn nhiều.

Một trong số ít trang mà tôi tìm thấy thảo luận về chủ đề này là http://www.xs4all.nl/~sbpoley/webmatters/emex.html của Stephen Poley . Stephen đưa ra những điểm tốt, tuy nhiên, cuộc thảo luận của anh ấy dường như không thuyết phục được tôi.

Vì vậy, câu hỏi của tôi là: Giá trị của đơn vị 'cũ' cho thiết kế web là gì?

(Câu hỏi này có thể được gắn thẻ chủ quan, nhưng tôi sẽ để quyết định đó cho những người có kinh nghiệm hơn bản thân tôi.)

Nó rất hữu ích khi bạn muốn định kích thước một thứ gì đó liên quan đến chiều cao của các chữ cái thường trong văn bản của bạn. Ví dụ: hãy tưởng tượng làm việc trên một thiết kế như vậy:

Trong kích thước kiểu chữ của thiết kế, chiều cao của các chữ cái có mối quan hệ không gian quan trọng với các yếu tố còn lại. Các dòng trong hình ảnh nguồn ở trên nhằm mục đích giúp chỉ ra chiều cao x của văn bản, nhưng chúng cũng cho thấy các nguyên tắc sẽ ở đâu nếu thiết kế xung quanh văn bản đó.

Như Jonathan đã chỉ ra trong các bình luận, ex chỉ đơn giản là phiên bản chiều cao của em (chiều rộng).

Để trả lời câu hỏi, một cách sử dụng là với chỉ số trên và chỉ số dưới. Thí dụ:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Một điều khác cần xem xét ở đây là cách trang của bạn mở rộng quy mô khi người dùng tăng hoặc giảm kích thước phông chữ của họ (có thể sử dụng ctrl + con lăn chuột (cửa sổ)).

Tôi đã sử dụng em với .. padding-left: 2 em; padding-right: 2 em;

và ex có padding-bottom: 2 ex; padding-top: 2 ex;

Do đó, sử dụng đơn vị đo dọc cho thuộc tính tỷ lệ theo chiều dọc và đơn vị đo ngang cho thuộc tính tỷ lệ theo chiều ngang.

Giá trị của việc có nó trong thông số kỹ thuật CSS, nếu đó là những gì bạn thực sự yêu cầu, chính xác giống như giá trị của việc có đơn vị em.

Nó cho phép bạn đặt phông chữ thành kích thước tương đối .

Bạn không biết kích thước phông chữ cơ bản của tôi là gì. Vì vậy, một chiến lược tốt cho thiết kế web là đặt kích thước phông chữ tương đối, thay vì tuyệt đối; tương đương với "gấp đôi kích thước bình thường của bạn" hoặc "nhỏ hơn một chút so với kích thước bình thường của bạn" thay vì một kích thước cố định như "mười pixel".

Lưu ý rằng, các thuật ngữ như "khoảng cách dòng đơn / đôi" thực sự có nghĩa là độ lệch giữa hai dòng liền kề, được đo bằng em . Vì vậy "khoảng cách dòng kép" có nghĩa là mỗi dòng có chiều cao là 2 em .

Do đó, nếu bạn muốn chỉ định khoảng cách dọc tỷ lệ với "lines", hãy sử dụng em. Chỉ sử dụng ex nếu bạn muốn chiều cao thực tế của chữ thường, tôi dám khẳng định là một trường hợp hiếm hơn nhiều.

CẬP NHẬT: Tiêu chuẩn web cho phép trình duyệt sử dụng 0,5em như cũ hoặc bắt nguồn từ phông chữ.

Tuy nhiên, không có cách nào để nhúng bất kỳ thông tin "x-height" vào phông chữ (OpenType hoặc webfont) một cách đáng tin cậy.

Do đó, khả năng trước đây làm cho đơn vị cũ dư thừa, và khả năng sau thiếu bất kỳ phương tiện đáng tin cậy nào để xảy ra. Và thực tế là có thể làm cho nó thậm chí còn ít đáng tin cậy hơn.

Vì vậy, tôi lập luận cho việc thiếu giá trị của đơn vị cũ.