2011-07-11 21 views
5

Tôi muốn sử dụng ý kiến ​​có điều kiện Paul Irish từ mẫu Boilerplate HTML:Làm thế nào để sử dụng ý kiến ​​có điều kiện Paul Irish trong một tổng thể trang SharePoint 2010

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> 

trong một SharePoint 2010 masterpage. Tôi đã đọc 'bình luận có điều kiện không phải lúc nào cũng hoạt động tốt trong SP2010'. (Không chắc chắn điều đó có nghĩa!) Lời khuyên là sử dụng:

<SharePoint:CSSRegistration Name="foo.css" ConditionalExpression="gte IE 7" runat="server" /> 

này cho phép tôi sử dụng một điều kiện để tải một stylesheet cụ thể nhưng không sử dụng các thẻ html có điều kiện theo cách Paul Irish gợi ý. Có cách nào để làm điều này hoặc có thể tôi chỉ cần dán mã từ Biolerplate vào masterpage Sharepoint?

Trả lời

3

Tôi rất mới xây dựng thương hiệu SharePoint và đang gặp phải vấn đề tương tự. Tôi không phải là một nhà phát triển ASP để hiểu một số giải pháp là một chút khó khăn.

Điều tôi đã làm là lấy các câu lệnh có điều kiện của Paul bằng thẻ HTML và chuyển chúng vào thẻ BODY và ​​nó có vẻ hoạt động hoàn hảo với việc phải làm lộn xộn và mã SP.

<!--[if lt IE 7]> <body class="no-js lt-ie9 lt-ie8 lt-ie7" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]--> 
<!--[if IE 7]> <body class="no-js lt-ie9 lt-ie8" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]--> 
<!--[if IE 8]> <body class="no-js lt-ie9" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]--> 
<!--[if gt IE 8]><!--> <body class="no-js" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <!--<![endif]--> 

Hy vọng điều đó sẽ hữu ích.

4

Tôi giả định rằng các trang chính SharePoint bằng với trang cái trong ASP.NET (MVC). Do đó, điều này không phải là vấn đề.

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> 

Tất cả các mã trước đó là đặt thẻ HTML với một lớp CSS khác trên thẻ HTML tùy thuộc trình duyệt nào đang truy cập trang web. Vì vậy, bạn có thể ghi đè lên một số tờ định kiểu cho bất kỳ trình duyệt cụ thể nào (IE).

site.css 

.coloredBackground 
{ 
    background-color: #FF0000; //red 
} 
.ie6 .coloredBackground 
{ 
    background-color: #00FF00; //green 
} 
.ie8 .coloredBackground 
{ 
    background-color: #0000FF; //blue 
} 

Trong ví dụ này, người dùng duyệt web với Firefox, Opera, Safari, IE7,9,10 sẽ thấy nền đỏ. Đối với IE6 màu nền được ghi đè với màu xanh lá cây và trong IE8 với màu xanh lam.

đăng ký CSS của bạn sẽ trông giống như sau:

<SharePoint:CSSRegistration Name="site.css" runat="server" /> 

Như bạn có thể thấy không có nhu cầu để thiết lập ConditionalExpression nữa trong việc đăng ký CSS, bởi vì bạn đã chuyển đổi style sheet sử dụng bằng cách thiết lập một lớp cụ thể trên phần tử HTML.

Cập nhật:

Một khả năng khác sẽ được bao gồm một file style sheet tùy thuộc vào phiên bản trình duyệt bằng cách sử dụng tài sản trên sự kiểm soát SharePoint aspx ConditionalExpression.

<SharePoint:CSSRegistration Name="ie6.css" ConditionalExpression="lt IE 7" runat="server" /> 
<SharePoint:CSSRegistration Name="ie7.css" ConditionalExpression="IE 7" runat="server" /> 
<SharePoint:CSSRegistration Name="ie8.css" ConditionalExpression="IE 8" runat="server" /> 
<SharePoint:CSSRegistration Name="ie9.css" ConditionalExpression="IE 9" runat="server" /> 

Nhược điểm là bạn có thể nhận được các vấn đề ưu tiên css vì lớp .ie* là mất tích trên các yếu tố html và do đó không bác bỏ các .class-to-override-if-specific-ie-version. Bạn có thể giải quyết vấn đề này bằng cách sử dụng quy tắc !important trong các tệp trang tính theo phong cách cụ thể.

+0

Vâng, tôi biết đây là cách thức hoạt động - tuy nhiên Sharepoint 2010 loại bỏ các bình luận có điều kiện xung quanh thẻ html để css không có lớp để móc vào. – Jaz

+1

Cập nhật câu trả lời với một khả năng khác. Nó có thể không phải là giải pháp tốt nhất nhưng nó sẽ hoạt động ... – diemogebhardt

+0

Hi Diermo, cảm ơn vì đã nỗ lực rất nhiều trong câu trả lời của bạn. Mã cập nhật của bạn sẽ hoạt động nhưng yêu cầu tôi chạy các tệp css riêng biệt cho mỗi phiên bản IE. Vấn đề là SharePoint loại bỏ các nhận xét có điều kiện trừ khi chúng ở định dạng được sử dụng trong bản cập nhật của bạn. Tôi muốn biết liệu tôi có thể sử dụng nhận xét có điều kiện theo phong cách Paul Irish trong SharePoint không? Tôi biết tôi có thể sử dụng biểu thức điều kiện SharePoint: CSSRegistration nhưng đây không phải là những gì tôi muốn. Câu hỏi của tôi là: Làm cách nào để sử dụng nhận xét có điều kiện của Paul Irish trong trang cái SharePoint 2010? – Jaz

1

Tôi đã sử dụng chuỗi chữ ASP để chuyển các nhận xét IE có điều kiện trong trang chủ SP2010 của tôi.

Bằng cách đó, tôi vẫn có thể chuyển giá trị ngôn ngữ được sử dụng trong thẻ <html> gốc, <%$Resources:wss,language_value%>.

&lt;asp:literal ID=&quot;html1a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if lt IE 7]&amp;gt; &amp;lt;html class=&amp;quot;no-js lt-ie9 lt-ie8 lt-ie7&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html1b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html1c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br /> 
&lt;asp:literal ID=&quot;html2a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if IE 7]&amp;gt;&amp;lt;html class=&amp;quot;no-js lt-ie9 lt-ie8&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html2b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html2c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br /> 
&lt;asp:literal ID=&quot;html3a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if IE 8]&amp;gt;&amp;lt;html class=&amp;quot;no-js lt-ie9&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html3b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html3c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br /> 
&lt;asp:literal ID=&quot;html4a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if gt IE 8]&amp;gt;&amp;lt;!--&amp;gt; &amp;lt;html class=&amp;quot;no-js&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html4b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html4c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;!--&amp;lt;![endif]--&amp;gt;&quot;/&gt; 

Nhưng nếu ai đó có thể cải thiện thêm phương pháp này, nó sẽ được đánh giá cao!

2

Đăng lại vì câu trả lời đầu tiên của tôi đã bị xóa. Điều này đã được chỉnh sửa để đáp ứng tốt hơn các nguyên tắc đăng bài của StackOverflow.

Tôi đã sử dụng tính năng này (từ cuối bài đăng của Paul, ngày 2012/1/17) và nó hoạt động tốt trong trang chính của SharePoint. Xin lưu ý rằng điều này khác với những gì bạn đã đăng, đó là phiên bản trước đó của mã.

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]> <html class="lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> 

Mối quan tâm của tôi là những thứ khác phải bị loại bỏ mà các trang SharePoint có thể cần. Dưới đây là thẻ HTML HTML gốc:

<html lang="<%$Resources:wss,language_value%>" dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr"> 

Khi bạn bắt đầu thêm nội dung đó vào thẻ HTML với các nhận xét có điều kiện, ngắt trang có điều kiện.

Tôi mong bạn cũng xem xét HTML/CSS của bạn để xem liệu một số CSS có điều kiện có thể bị xóa để giúp hợp lý hóa giải pháp của bạn hay không.

0

Với Sharepoint 2010, tốt nhất là tránh đặt điều kiện xung quanh thẻ <html>. Điều đó đang được nói, bạn có thể thêm vào các điều kiện của bạn trong thẻ <head> và thêm các lớp vào thẻ html của bạn bằng cách sử dụng Javascript. Đây không phải là lý tưởng cho một trang web thường xuyên nhưng đối với Sharepoint, đây là một phương pháp unubtrusive mà làm việc trong một doanh nghiệp Sharepoint lớn 2010 trang web mà tôi giúp duy trì:

... 
<html id="Html1" class="no-js" lang="<%$Resources:wss,language_value %>" dir="<%$Resources:wss,multipages_direction_dir_value %>" runat="server" __expr-val-dir="ltr"> 
    <head id="Head1" runat="server"> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
     <meta http-equiv="Expires" content="0"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <!-- IE version conditionals will apply classes to html element if old IE --> 
     <!--[if lt IE 7 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie7";</script><![endif]--> 
     <!--[if lt IE 8 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie8";</script><![endif]--> 
     <!--[if lt IE 9 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie9";</script><![endif]--> 
     <!--[if lt IE 10 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie10";</script><![endif]--> 
     ... 
Các vấn đề liên quan