CSS VÀ NHỮNG ĐIỀU PHIỀN TOÁI NÓ GÂY RA

23-03-2018 12:00

Năm 1996, các trình duyệt vẫn chưa thể hỗ trợ hoàn toàn cho CSS khiến cho các web designer vẫn phải code khá nhiều để lách nhằm cho CSS của họ chạy đúng. Cho đến 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.

Mới học lập trình nên bắt đầu với 10 ngôn ngữ lập trình này

Những thói quen tốt của lập trình viên thành công

Roadmap cho lập trình viên năm 2018

Cấp độ thứ ba của CSS được phát 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, animations, gradients, transitions, cũng như là các layout mới như flexible box, multi-columns hay grid layouts.

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 trở nên 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 được ngắn gọn, dễ đọc và dễ quản lý hơn.

CSS 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, 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ức khắc.

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

1. CSS là ‘hướng markup’ 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 mắt hơn và bớt thời gian vô dụng với những cái tag markup, các vấn đề tương thích trình duyệt. Khi nói "hướng markup" có nghĩa rằng các công cụ thiết kế CSS ép người dùng qua chế độ lập trình thay vì giúp họ "hướng design". CSS trở nên tồi tệ bởi vì nó ép các designer nghĩ về kỹ thuật hơn là nghĩ 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 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 bạn 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. 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.
Thử dùng các công cụ CSS3 auto-generator. Những công cụ này 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 Brower Testing…

3. Responsive Layout

Ngày càng nhiểu thiết bị với độ phân giải, kích thước khác nhau. Thiết bị 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à 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ế như thế này?

Ngoài việc thiết kế cho cả nằm ngang và dọc, chúng ta cần cân nhắc đến hàng trăm sự khác nhau của màn hình. Bên cạnh đó, 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, 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 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 đều có 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 liên 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.

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ọ :)

Lập trình Python & Odoo Framework với IziSolution

Lập trình CC++ với FPT Software

Lập trình ứng dụng di động Android

Khóa học Kiểm thử phần mềm Tester