<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      上海企業做網站:CSS如何幫助你實現現代化

      日期:2021-05-24 閱讀:189   作者:上海網站設計開發公司

      作為網頁設計師,我們經常被鼓勵利用CSS所提供的最新和最好的特性。有很多令人信服的理由這么做。像CSS網格和Flexbox這樣的技術可以快速處理通用布局,而CSS動畫增加了運動和交互性。這只是冰山一角。

      然而,實現這些功能有時會以犧牲瀏覽器兼容性為代價。對于仍有大量用戶使用舊版瀏覽器的網站,或者對于那些非常新的功能,有可能將一些人排除在外。

      從哲學上講,有些設計師對此很滿意,這沒關系。但是實現這些特性的回退可能比您想象的要容易。這些故障保護措施提供了特定布局或設計元素的合理復制,并與傳統的web瀏覽器兼容。

      今天,我們將向您展示如何利用Modernizr特征檢測庫來實現這一目的。開始了!

      什么是現代化?

      現代化是網頁設計師多年來一直依賴的便捷工具之一。它是一個可以定制的庫,可以在網頁加載時“檢測”(實際上,它正在運行測試)特定的特性。從那里,它將CSS類添加到頁面的<HTML>元素,允許設計人員根據庫找到的內容確定代碼的目標。

      在我們的例子中,我們將使用它來檢測cssflexbox。不過,它還可以查找與HTML和JavaScript相關的特性。例如,您可以使用它來確定瀏覽器是否支持HTML5。如果沒有,可以使用可用的html5shiv腳本來編寫代碼。

      真正好的是您可以定制Modernizr以滿足項目的需要。他們網站的用戶界面會讓你只選擇你想檢測的項目。一旦你做了選擇,點擊“構建”按鈕生成一個定制的可下載包。

      我們的身材

      為了我們的目的(為了簡單起見),我們正在構建我們的現代化軟件包來檢測 撓性箱. 我們也會選擇縮小代碼和添加CSS類

      The Modernizr website.

      步驟1:設置演示

      要演示這一切是如何工作的,需要兩個文件–都可以在 github :

      • flexgrid.css

        –這是我們簡單的CSS Flexbox網格系統。您會注意到它有針對不同對齊方式和列寬的類。此外,還有一套特殊的

        .no-flexbox

        也使用老式CSS浮動的類。這將幫助我們在傳統瀏覽器中創建類似的布局樣式。
      • 現代化-custom.js

        –上述腳本將檢測當前瀏覽器是否支持CSS Flexbox。

      接下來,我們要創建一個新的HTML文檔,它調用<head>面積。此外,文檔還需要一個示例 CSS Flexbox。版面和一些內容

      您可以隨意使用下面的演示文件進行實驗。它包含了一個簡單的3列布局,以及一些次要的視覺增強(稍后將詳細介紹)。

      步驟2:在現代瀏覽器中查看HTML文檔

      現在是時候看看我們的演示在瀏覽器中的外觀了。首先,讓我們使用一個支持Flexbox的現代web瀏覽器。

      A 3-column CSS layout.

      至少,我們犯罪嫌疑人它支持Flexbox。我們怎樣才能確定呢?這就是現代人要做的。

      在我們的例子中,我們需要查看演示頁面的源代碼,特別是<HTML>元素。如果有一類 撓性箱添加到元素中,我們知道我們的瀏覽器支持該功能。繼續在瀏覽器中查看頁面源代碼–我們將等待。

      班級在哪里?

      如果您試圖查看頁面的完整源代碼,您可能會注意到<HTML>元素不包含類。別擔心-這很正常。

      因為類是在運行時添加的,之后所選功能的現代化測試。因此,它不會顯示在完整的源代碼中。

      使用瀏覽器的開發工具

      相反,打開web瀏覽器的開發工具(點擊12層按鍵)。這將提供對<HTML>元素

      這里,我們使用的是最新版本的Firefox開發者版。根據Modernizr的說法,它支持CSS Flexbox。耶!

      Firefox Developer Tools displaying CSS Flexbox support.

      步驟3:在舊瀏覽器中測試CSS回退

      在我們的現代瀏覽器中一切看起來都很不錯。但是遺留軟件呢?

      我們的樣式設置為在不支持Flexbox的瀏覽器中使用CSS浮動。這種回退應該允許我們創建一個多列布局,即使是在古老的設置上。

      根據我能用嗎,Flexbox早在internetexplorer10、firefox2、chrome4和Safari 3.1就已經部分支持了。自從這些瀏覽器被廣泛使用以來,很多年過去了。然而,尤其是(現在)仍在四處徘徊。

      Modernizr可以配置為測試部分支持,但它會變得一團糟。這會導致編寫更多的CSS回退,這些回退考慮了許多不同的情況。效率不高。因此,我們在測試中尋找全部或全部支持。

      讓我們看看IE10中的演示(通過瀏覽器測試服務),看看會發生什么。

      A 3-column CSS layout, with the third column pushed to a new row.

      不太寒酸。我們的第三列被下推到下一行,可以對其進行調整。但是Flexbox支持呢?

      快速查看IE的開發工具可以看到<HTML>元素顯示一個類無伸縮箱. 這意味著Flexbox是不支持在這里,CSS回退正在被利用。

      Internet Explorer Developer Tools displays no support for CSS Flexbox.

      修復CSS浮動的布局

      我們的退路CSS浮動不會配合我們做的視覺增強。第三列被下推到第二行,看起來不太好。

      那是因為漂浮物添加填充和邊框到我們先前在樣式表中設置的列寬。另一方面,Flexbox可以在不增加整個列寬的情況下調整這些項。因此結果的不同。

      我們可以做一些不同的事情來改變這種局面。我們可能會削減列的寬度,甚至縮小列之間的邊距。讓我們試著從30.66% 28.66% .

      Comparison: CSS Flexbox layout (top) and CSS float fallback (bottom).

      成功了!我們的專欄現在顯示得很好,與Flexbox版本相當相似。除了一些間距差異,這至少在舊瀏覽器中是可用的。我們可以進去做進一步的修改,使之更接近原始版本。

      檢測瀏覽器功能并進行相應調整

      雖然我們的演示重點是檢測cssflexbox,Modernizr可以做更多的工作。它可以尋找其他常見的特性,如HTML畫布、SVG支持、CSS網格和其他有用的花絮數組。

      這樣做的目的是,一旦你知道用戶的瀏覽器有什么功能,你就可以調整你的代碼來適應它。例如,這使得采用新的CSS規范就不那么令人擔憂了。

      也許您不需要在每個實例中都使用回退。但很高興知道,在現代化的幫助下,實施這些措施很容易。


      网赚团队