分類
WordPress 問與答 網頁設計

為什麼不應該把 display: none; CSS 語法當萬解?

常常看到,網路上包括 WordPress 相關社團,對於頁面上,想拔掉特定元素的發問、留言,妙的是,很常出現不分案例情境、網站的佈景主題與外掛建置環境,都直接就是 CSS disply: none;…。display: none; 大法不是不能用,但建議當備案,別當第一優先甚至唯一解法,比較適合,畢竟前台載入還是有差。

內容目錄

情境

常常看到,網路上包括 WordPress 相關社團,對於頁面上,想拔掉特定元素的發問、留言討論,妙的是,很常出現不分案例情境、網站的佈景主題與外掛建置環境,都直接就是 CSS disply: none;

萬解唯一解的迷思

萬解唯一解的迷思。

我是建議別在沒探究不同解法的可能性前,就直接什麼都 display: none; 當第一優先的萬解,尤其是整塊的版本元素,與 WooCommerce 的欄位相關需求,蠻多時候,可以加簡短的 PHP ‘ 在子佈景裡改,或等原開發者釋出更新版本、提供對應的語法來處理掉,雖然這技術門檻,比後面兩種來得高。

若是很簡單的一個小元素,衡量網站建置環境與自身條件後,適合(或只能)繞過較困擾、高成本的作法,同時是快又有效、影響小到可以忽略的作法,當然也是可以理解的。

避免不必要的複雜化與連帶的維護風險,也很重要。如果有精準符合需求的外掛解,不是殺雞用牛刀(例如:為了一小個欄位、需求,卻用了多功能的複雜外掛),才比較值得用外掛處理掉。

細膩卻基本的真相

display: none; 的運作流程與真實狀況是:

載入它(可能已顯示)→載入 CSS 語法→套用到 CSS 語法→消失。

只是常常載入上,基於各種原因剛好看不出來,但並不總是如此。

但這過程中,它這元素還是載入了,且可能於瀏覽器短暫顯示了一下之後,才真的套用到語法而消失。

圖解範例說明

我們以中間那本藍色的書作為語法套用效果的圖解:

CSS display: none; 效果 – 以中間那本藍色的書作為語法套用範例

GIF 動畫圖檔

接著是,以 GIF 動畫圖檔,作為中間那本藍色的書的語法套用效果圖解:

CSS display: none; 動態版效果 – 以中間那本藍色的書作為語法套用範例

由此來展示,元素及其 Request ,依然有被連線、載入,在語法套用生效後才從原本的位置整個抽離、消失掉。

有興趣可以對大塊一點、涉及資料欄位的東西做 display: none; 跑載入就知了,像是整塊表單或整片頁面區塊的複合元素,別用快取,會更明顯。

版面的整塊元素

情境範例 – 分屬佈景主題與 WooCommerce 外掛的購物車表單,同時呈現(重複)。

若想拔掉的是版面上的整塊元素,或與動態資料欄位有關,你會以 CSS display; none; 作為第一優先甚至唯一選項嗎?

建議方針

以下是建議的解決方案優先序(以 WordPress 生態圈為主):

  1. 往目前使用的佈景主題找,確認是否由佈景主題控制且可直接調整。
  2. 往目前使用的外掛找,確認是否由哪款啟用的外掛控制且可直接調整。
  3. 找符合需求的外掛或研究一下 PHP 語法,可直接改範本檔也可用 Code Snippets (PHP 語法,同時也能用 Code Snippets 處理自訂 CSS 語法)。
  4. 以上都不行,或評估技術、時間(機會成本)、金錢(各種付費處理)等條件後,只有 display: none; 合用,那就下萬解吧!

至少跟一開始就只採取,不一定真的妥適的萬解相比,整個過程能獲得更多東西,也會更有想法,像是「有機會的話,想改成怎樣更好的作法」。

看似同樣決策的背後差異

  1. 知道不只 A 解法(就算最後只會A 解法也無妨),綜合考量 A, B, C…等解法與自身條件過後才選 A。
  2. 只知道 A 解法,卻不保留其他空間,就推得好像只有 A 解法萬解甚至唯一解。

這裡的 A 解法和適用情境,可以代換成許多不同的外掛、不同工具或服務,甚至各種領域。

這兩種狀況,永遠是差異極大的兩回事

也是你的網站能否有進步空間、你尋覓評估篩選廠商或任何解決方案的,幾個決定性因素之一。

參考資料

CSDN.NET

https://blog.csdn.net/qq449245884/article/details/106110465

QR Code

作者: Green

AMP, Branding, Copywriting, Marketing, Multilingual, WordPress - https://facekungfu.com/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *