5 điều phiền toái nhất của CSS

CSS có tuyệt vời không? Những điều bực bội sau đây là quan điểm cá nhân tôi.

Vào năm 1996, các trình duyệt vẫn chưa hỗ trợ hoàn toàn CSS khiến cho các we designer phải code khá nhiều để lách nhằm cho CSS của họ chạy đúng. Sự thật là cho đến trước năm 1999 thì không có bất kỳ trình duyệt nào tích hợp đầy đủ các đặc tả của CSS1. Internet Explorer 5.0 dành cho Macintosh được phát hành vào tháng 3/2000 là trình duyệt đầu tiên hỗ trợ hoàn toàn CSS1. CSS2 đã được phát hành vào năm 1999 nhưng các web desginer đã do dự khi sử dụng nó bởi vì vẫn chưa có browser nào hỗ trợ hoàn toàn.

Cấp độ thứ ba của CSS được bắt đầu phat triển vào khoảng năm 1998. Cho đến năm 2009 nó vẫn đang được phát triển. CSS3 mang những thứ mới mẻ đáng được chờ đợi như rounded corners, shadows, gradients, transitions, animations, cũng như là các layout mới như multi-columns, flexible box hay grid layouts.

May mắn là ngoài những nỗ lực của W3C nhằm cải tiến những đạc tả kỹ thuật để đáp ứng nhu cầu của developer, cộng đồng front-end đã cho ra đời nhiều giải pháp thông minh xoay quanh việc làm cho CSS dễ dàng hơn trong một môi trường phức tạp. Giới thiệu về các biến CSS, loại bỏ kiểu dáng dự phòng khiến cho việc viết CSS trở nên ngắn gọn, dễ đọc và dễ quản lý hơn.

CSS chắc chắn là một cải tiến của HTML thuần già cỗi nhưng những hạn chế của nó thật đáng kinh ngạc và thiếu sự hỗ trợ của ngành công nghiệp đã kềm hãm các nhà thiết kế  trong nhiều năm, đó là lý do tại sao nó không chiếm được một chỗ trong tim của các developer 🙂

Ngay cả ngày nay, cho dù bạn gọi mình là “full stack developer” hay là “front end developer” … dù bạn có “một năm kinh nghiệm” hay “8 năm kinh nghiệm”, CSS vẫn sẽ ném bạn vào vòng lặp ngay tắp lự.

Sau đây là một danh sách các vấn đề chủ yếu của CSS:

1. CSS là ‘hướng markup’ chứ không phải ‘hướng design’

Các designer nên dành nhiều thời gian để thiết kế các site trông đẹp hơn và bớt thời gian vô dụng với những cái tag markup và vấn đề tương thích trình duyệt. Khi tôi nói “hướng markup” có nghĩ rằng các công cụ thiết kế CSS ép người dùng qua chế độ lập trình thay vì nên giúp họ “hướng design”. CSS trở nên tệ bởi vì nó ép các designer nghĩ về kỹ thuật hơn là theo quan điểm thiết kế.

2. Cuộc chiến trình duyệt

Bạn thiết kế một layout hoàn hảo cho website mới sắp ra mắt. Nhưng giờ khi chuyển đổi tất cả các file Photoshop PSD hay Sketch đẹp đẽ sang mã lập trình là một thử thách lớn. Thậm chí nó không phải thử thách nữa mà là rào cản không chỉ bởi vì bạn không biết code mà còn ở sự khác biệt ở cách hiển thị của các trình duyệt khác nhau, ngay cả khi bạn viết mã CSS đúng. Càng bực bội hơn nữa khi mà sửa lỗi ở browser này sẽ tạo ra một lỗi lớn khác ở browser khác

Mẹo nhanh:

  • Luôn dùng Normalize.css. Nó làm cho browser hiển thị tất cả các element đúng đắn hơn theo chuẩn hiện đại. It makes browsers render all elements more consistently and in line with modern standards. Chính xác là chỉ nhắm mục tiêu vào các style cần bình dân hoá.
  • Bạn có thể dùng các CSS Frameworks như Bootstrap, Bulma & Materialize. Chúng tương thích với hầu hết các browser phổ biến.
  • Hãy thử dùng các công cụ CSS3 auto-generator. Nó giúp các developer tạo ra các mã CSS cross-browser và tùy chỉnh toàn diện bao gồm border-radius, text-shadow, RGBa, box sizing và box resizing. Ví dụ như: CSS3 Generator.
  • Validate: W3C Validation Service sẽ xác thực nhiều version của XHTML và HTML, nó cũng hiển thị nhiều thông điệp báo lỗi và cảnh báo hữu ích để giúp người dùng tạo nên một website hoàn hảo. W3C Validator: http://validator.w3.org/
    W3C Css Validator: http://jigsaw.w3.org/css-validator/
  • Testing: Không khả thi để thực hiện việc kiểm tra trang web của bạn trong thiên hà rất nhiều trình duyệt và hệ điều hành, các công cụ kiểm tra chéo trình duyệt đã đến để giải cứu bạn! Bạn có thể sử dụng Browsershots, BrowserStack, Cross Browser Testing...

3. Responsive Layout

Ngày càng nhiểu thiết bị với nhiều độ phân giải, kích thước khác nhau. Thiết bị mới với kích thước màn hình mới đươc phát triển mỗi ngày, mỗi một trong số các device đó lại có sự khác nhau về kích thước, chức năng và kể cả màu sắc. Một số thì nằm ngang, một số lại nằm dọc, số khác thì hình vuông. Như chúng ta cũng biết về sự nổi tiếng của iPhone, iPad và các smartphone cao cấp đều có chế độ xoay màn hình. Vậy design thế nào trong các tình thế này?

Ngoài việc thiết kế cho cả nằm ngang và dọc, chúng ta phải cân nhắc đến hàng trăm sự khác nhau của màn hình. Bên cạnh đó, rất nhiều user không mở rộng hoàn toàn browser của họ, khiến tồn tại hàng tỷ kích thước màn hình khác nhau.

Mẹo nhanh:

  • Ưu tiên và Ẩn Nội dung trên điện thoại di động. Theo tôi, sẽ tốt khi hiển thị các nội dung có liên quan nhất trên màn hình nhỏ. Đôi khi việc loại bỏ nội dung trên điện thoại di động là không thể. Trong trường hợp đó, bạn có thể ẩn nội dung đằng sau các vùng có thể áp dụng được.
  • Dùng Scalable Vector Graphics (SVGs). Không như các định dạng ảnh truyền thống như PNG hay JPG, SVG dễ dàng phóng to từ nhỏ đến lớn mà không giảm chất lượng. SVG thường nhỏ hơn nhiều so với các ảnh khác, vì thế nó cũng giúp website của bạn load nhanh hơn
  • Khi dùng các input(buttons, forms…), tập trung vào thiết kế “thiết kế cho người béo” bằng cách làm cho kích cỡ của các nút và khu vực nhấn được thật to ra
  • Nếu là các smartphone có màn hình nhỏ, các nút nên có kích thước 44 điểm theo như khuyến nghị của Apple tại iOS Human Guidelines
  • Test thiết kế của bạn với ít nhất 5 user trên thiết bị của họ
  • Sử dụng CSS framework cho responsive designs như Bootstrap. 

4. Làm màu đỏ thêm xanh

Đa số các khách hàng đến với các yêu cầu kỳ lạ, sai kỳ vọng, thêm các tính năng mà chưa bao giờ được trao đổi khiến cho việc chỉnh sửa không dừng và luôn lặp lại. Các khách hàng thay đổi xoành xoạch mỗi giây, đặc biệt là khi thiết kế, nhà thiết kế cuối cùng cảm thấy bị chê bai hoặc ngược đãi (đó là lý do tại sao chúng tôi có các trang web như Khách hàng đến từ địa ngục)

Mẹo nhanh:

  • Tạo các bản mẫu hoạt họa là cách tốt để trình diễn ý tưởng của bạn. Dùng các tool như  Adobe XD, Sketch, InVision etc. Chỉ bắt đầu quá trình phát triển khi thiết kế đã được duyệt.
  • TỐt nhất là thiết lập một timeline phù hợp khi bạn bắt đầu. Mọi nhu cầu phát sinh thêm vào timeline và cột mốc của dự án sẽ sinh ra những điều không mong đợi.
  • Giữ bình tĩnh!! Đừng để cảm xúc xâm chiếm bạn, hãy nhớ rằng các khách hàng họ chưa từng trải qua các trường lớp đào tạo nghệ thuật và họ không biết rằng text màu đỏ trên một background xanh lá cây không phải là lựa chọn tốt cho việc dễ đọc. Hãy giải thích lý do quyết định của bạn.
  • Hãy nhớ rằng website đó là dành cho khách hàng của bạn, bạn muốn họ hạnh phúc với nó, việc tốt nhất là cần đưa ra những khuyến nghị thay đổi, nếu họ không đồng ý, hãy làm hết sức theo ý họ 🙂

5. CSS bị đánh giá thấp

CSS đa phần gây bực bội vì không ai thực sự dành thời gian học các thứ liên quan. Họ luôn mắc kẹt với cùng một vấn đề.

Tôi từng làm việc với vài kỹ sư back-end thiên tài, những người rành OOP và họ nghĩ rằng responsive CSS là thứ gì đó ma thuật

Đó là lý do vì sao thôi tìm truyện tranh này cho bạn

CSS cũng như hầu hết các thứ khác, cần phải có thời gian để nắm bắt nó.

CSS chỉ vài phút để hiểu nhưng có thể tốn cả đời để master!

Nguồn: Blog Techtalk via blog.geekyants.com