"前端開發"共有124篇文章

之前我們在 快速查詢CSS/HTML與各瀏覽器的支援－Can I Use  這篇文章中 提到過瀏覽器支援性的問題，在這篇文章中我們建議開發者先到 Can I Use 網站中確認瀏覽器對CSS新屬性的支援度再進行開發。然而在實際開發的過程中，我們常常會遇到客戶在驗收階段對我們說：「為什麼在我手機(電腦)上看起來怪怪的？」仔細確認過客戶的裝置版本之後、就是各種的無奈。在這個階段我們不太可能把之前做好的東西推翻重做，多數時間的解法都是針對不支援的瀏覽器另外設置對應的CSS。在這個時候，確認瀏覽器是否支援某些CSS屬性這件事、就變得非常的重要。

slick js 是一個相當好用的輪播套件，Magento2 page builder裡的slider也是使用這個套件來實現輪播的效果。這篇文章要跟大家分享的是：如何使用slick js 製作上下滾動的滑塊，以及如何解決垂直滑動時出現的高度問題呦！

由於Dart Sass 2.0.0不再支援用"/"表示除法，如果您恰好使用了這個方法，那麼在編譯的過程中，SASS會不斷的跳出棄用警告：DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.。而且這警告又沒有辦法關閉，雖然不影響編譯的結果，但是大量的警告真的很煩人。若是使用了bootstrap 4，那警告量更是驚人。若是要解決這個問題，底下提供了二個方法供您參考。

Bootstrap 3 和 Bootstrap 4 的下拉選單，只支援到第二層，如果需要多層次選單的話，我們需要用到 bootstrap-submenu.js。其中Bootstrap 3 要搭配 Bootstrap-submenu 2使用，Bootstrap4 則是要搭配 Bootstrap-submenu 3 使用。今天這篇文章主要是分享Bootstrap 4 + Bootstrap-submenu 3的作法，關於Bootstrap 3 + Bootstrap-submenu 2 的作法，你可以參考我們的舊文章：讓你的Bootstrap下拉選單可以支援多層選單

當我們從github下載Magento PWA Studio來使用的時候，會發現PWA是直接使用CSS檔案，沒有透過任何的編譯工具。如果您已經習慣使用SASS或LESS來編譯CSS，那你一定很希望能夠在PWA繼續使用你熟悉的工具，要不然光是那些巢狀的CSS選擇器，就可以把人給逼瘋。這篇文章就是要跟大家分享如何在PWA使用SASS及LESS。

在開發多國語系的Shopify網站時，我們常常需要在不同的語系下，顯示不同的頁尾選單。而shopify的預設功能，沒有辦法針對不同語系去指定不同的頁尾選單。因此我們需要修改程式碼來實現多語系的頁尾選單。如果想要針對不同語系顯示不同的頁尾選單，我們只需要把握判二樣技巧就可以了一、判斷語系二、呼叫自訂選單

React DevTools 是React js的除錯工具，可以用來觀察React APP在網頁面執行的一些資訊，利如組件之間的相互關係。不論是Chrome或者是Firefox 都有React DevTools的擴充工能。在預設的情況下，React DevTools是不支援本機網站的，這篇文章要分享如何安裝React DevTools並支援本機網站。底下我們以Chrome為例來做分享。

這篇文章要跟大家分享安裝Magento PWA sample data的方法以及如何解決可能遇到的問題。 在開始之前您需要先有一個Magento2 網站，安裝方法可以參考我們之前的文章： 如何使用composer安裝magento2 如果您之前已經安裝了 magento2-sample-data的模組，那必須先把sample data的模組移除，再用全新乾淨的資料庫重新安裝一次。

在將結帳按鈕移到畫面底下之後、你可能也需要將結帳的同意條款移到畫面底下。假設我們使用的主題包是AstralWeb/theme，底下我們的範例是直接在AstralWeb/theme這個主題包裡移動同意條款核取框的位置。

在Magento2的結帳頁中，預設的結帳按鈕是跟著結帳方式跑的。每個結帳方式都有自己的結帳按鈕。那如果我們想要把結帳按鈕移到結帳頁的畫面底下，並且希望只有一個結帳按鈕的話、又該如何處理呢？假設我們使用的主題包是AstralWeb/theme，底下我們的範例是直接在AstralWeb/theme這個主題包裡移動結帳按鈕的位置。

今天的前端開發小學堂，會介紹兩項小方法： 在一般情況下，按下Enter就會直接送出表單，若有額外的需求，不能讓表單直接被送出呢？ 在做項目選擇時，我們可一直將勾選框打勾，若要限制可勾選數量呢？ 以上兩種問題小情境， 想知道怎麼製作嗎，那就繼續往下看吧！

今天要來介紹寫CODE在專案進行多人協作時，好用的Forking Workflow。Forking Workflow的主要好處是，不需要所有開發者都擁有能push code到專案的repository中的權限，而其他開發者的Code也可以被整合在一起。每當其他開發者推送修改到自己的fork repository，再發起Pull Reques的通知給專案維護者，讓專案維護者合併到專案repository。這樣專案維護者可以不需要給其他開發者專案repository權限，並接受任何開發者的提交修改。