Thuộc tính zoom trong CSS

Zoom là một thuộc tính trong CSS, tuy nhiên nó không được hỗ trợ ở hầu hết các trình duyệt. Và theo MDN, thì nó là một thuộc tính Non-standard.

Sơ lược qua cú pháp sử dụng:

/* Keyword values */
zoom: normal;
zoom: reset;

/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

Thuộc tính zoom khá dễ sử dụng, đơn giản là chúng ta muốn phóng to hay thu nhỏ một element nào đó với tỉ lệ bao nhiêu thì áp dụng cái là xong.

Tại sao nên tránh dùng zoom

Chuyện là khi mình maintain một dự án cũ, khi mình được giao task thay toàn bộ chart cũ bằng chart mới theo design. Lúc đó mình sử dụng bộ chart Echart (Đây là bộ chart mình thấy hữu dụng và đa dạng nhất mình từng biết, khá dễ sử dụng và có thể tùy chỉnh rất sâu, có nhiều tính năng hay nữa, rất thích hợp để làm chart thống kê phân tích dữ liệu). Thì vị trí trỏ chuột của mình bị lệch khi sử dụng echart, lúc đầu mình còn tưởng khi thêm các feature của echart nó bị lỗi, chắc do lỗi bị zIndex gì đè lên, hoặc là react như nào đó không tương thích, nhưng cuối cùng mình nhận ra là do vị trí chuột nó bị lệch khi di chuyển trên chart đó.

Và tại sao lại như vậy, mình search tất cả các thông tin về lỗi của echart, nhưng kết quả là không hề có lỗi nào về vị trí của chuột. Lúc này, mình khẳng định vậy chắc là lỗi JS, không thích phiên bản react với phiên bản echart đó, mình upgrade echart lên bản mới nhất, tuy nhiên thì vẫn không hề fix được lỗi đó.

Và có một lần, mình nhận code một prototype web, khi mà bạn designer mới vào nghề, rẽ ngang từ hình minh họa, bạn đã design website với kích thước presentation 1920 x 1080. Lúc mình nhận, đồng ý các thứ rồi, bắt tay vào code, tới lúc responsive mình mới nhận ra vấn đề. Lúc đó, mình tính là feedback lại, nhưng mà nếu feedback lại thì khả năng cao là designer đó phải làm lại từ đầu, vì vốn dĩ, design trên figma, không thể scale tương đối các thông số được. Và khi designer làm lại từ đầu, thì bản thân mình cũng phải làm lại từ đầu. Lỗi này từ cả hai phía khi không kiểm tra kĩ. Và sau đó, mình đã liên hệ bên đó, thống nhất và đưa ra một cách làm tốt nhất trong trường hợp này là mình sẽ dùng zoom, đảm bảo cho việc là k cần phải design lại, mình cũng k cần phải code lại, giải thích rõ về lỗi của cả hai bên. Và dự án ấy khi sử dụng zoom, chẳng hạn như màn hình bạn chỉ có width 1200, nhưng khi xài zoom: 1200 / 1900, thì web site của bạn sẽ có độ rộng 1900, quá dễ quá đã quá thần thánh.

Lúc đó, mình đã thấy zoom rất thần kì, thật sự rất thần kì. Nhưng thực ra, tại vì website đó làm prototype nên có thể trick như vậy chứ ngay bản thân thằng zoom vì nó thay đổi kích thước thật của element, mình thấy nó rất hay, hay hơn hẳn transform scale, thì chỉ thay đổi kích thước hiển thị. Tuy nhiên đáng buồn là zoom k được hỗ trợ trên hầu hết trình duyệt, lúc ở kích thước mobile, các font chữ cũng không bị zoom nhỏ được. Đấy, nó chỉ phù hợp để các bạn trick, vá nhanh, fix tạm thời, chứ lên prod hoặc về lâu về dài thì không nhé.

Kết

Mong là sau này, zoom có thể được sử dụng hầu hết trên các trình duyệt, trở thành một thuộc tính standard, để mọi người dễ dàng sử dụng chứ với hiện tại, mình khuyên là không nên dùng nha. Chúng ta có thể dùng transform scale để thay thế. Bài sau trong chuỗi CSS này, mình sẽ hướng dẫn các bạn phân tích, tối ưu responsive cho một số trường hợp đặc biệt =)) (Ví dụ cụ thể là website Digital Ocean trên mobile)