Cẩn thận khi reset CSS trong SharePoint

Reset CSS là một thuật ngữ khá quen thuộc khi lập trình front-end. Khi lập trình website “from scratch” tức là tự xây dựng trang HTML/CSS bằng tay mà không sử dụng bất cứ template có sẵn nào trên mạng, bạn thường sử dụng kỹ thuật reset CSS trong front-end. Tại sao lại phải reset CSS?

Reset CSS là gì?

Phạm vi bài viết không đi chi tiết về reset CSS. Reset CSS là việc bạn loại bỏ các thuộc tính default của các phần tử HTML mà trình duyệt định nghĩa sẵn. Ví dụ, bạn có thẻ p thì thuộc tính mặc định nó sẽ có margin, padding, …

Tất cả các thẻ HTML đều có thuộc tính riêng (tất nhiên rồi). Tuy nhiên, mỗi trình duyệt sẽ quyết định thuộc tính mặc định của chúng. Có nghĩa là khi bạn xem 1 trang web ở trình duyệt Google Chrome hoặc FireFox, bạn sẽ nhận ra sự khác biệt mặc dù cũng là 1 phần tử HTML đó.

Việc reset CSS giúp bạn có thể tự style lại cho các thẻ HTML 1 cách dễ dàng. Từ đó, giúp cho việc hiển thị trang web trên trình duyệt một cách đồng bộ nhất có thể.

Reset CSS trong SharePoint

Lần đầu tiên làm công việc branding cho SharePoint là 1 dự án SharePoint 2010 farm solution. Như thường lệ, mình áp dụng kỹ thuật reset CSS vào master page SharePoint như mình đã từng làm với các dự án WordPress khác. Kết quả thật quá thất vọng. Tại sao?

Default CSS của SharePoint đã được định nghĩa bởi Microsoft khá nhiều. Việc reset CSS bạn áp dụng sẽ làm hỏng tất cả các style mặc định của SharePoint và bạn không thể kiểm soát được (chắc chắn 100% vì SharePoint là 1 big product của Microsoft. Số lượng file CSS khổng lồ, làm sao bạn có thể ngồi style lại cho các thẻ HTML phải không nào?)

Nếu không reset CSS thì sao?

Khi gặp khó khăn trong việc reset CSS trong SharePoint. Một câu hỏi kinh điển đó là: nếu không reset CSS thì có sao không. Nếu không reset CSS, các custom style bạn áp dụng vào SharePoint sẽ khiến website hiển thị không đồng bộ trên các trình duyệt.

Giải pháp nào thay thế?

Một cách khác là bạn viết CSS riêng cho từng trình duyệt (mình sẽ đề cập bài viết riêng), còn gọi là CSS hack

Giải pháp cho SharePoint 2010

Đối với SharePoint 2010, mình gợi ý 1 giải pháp siêu điển được đề cập trong bài viết SharePoint 2010 Reset CSS

Giải pháp cho SharePoint 2013 và SharePoint Online

Với SharePoint 2013 on-primes hay online, bạn có thể sử dụng Bootstrap. Tuy nhiên, Bootstrap cũng có reset CSS của riêng nó. Trong bài viết sau mình sẽ hướng dẫn làm cách nào để sử dụng Bootstrap trong SharePoint

Ngoài ra, một gợi ý đắt giá được đề cập ở trang Browser Hack

Nên thực hiện testing đa trình duyệt

Việc có tester team để thực hiện việc này là 1 điều nên làm. Bạn sẽ tránh được các rắc rối khi khách hàng sử dụng nhiều loại trình duyệt khác nhau.

Ngoài ra, khi test trên nhiều trình duyệt, một số function sử dụng Javascript sẽ gặp lỗi. Lúc này, tester sẽ report lại cho developer team và fix bugs. Việc bỏ qua công đoạn testing đa trình duyệt không những khiến developer fix bugs hộc máu mà còn làm trễ deadline của dự án.

Cám ơn bạn đã đọc. Hãy comment bên dưới nếu có bình luận gì thêm nhé!

Leave a Reply

Your email address will not be published. Required fields are marked *