文章彙整

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

首頁  /  新知分享  /  網站技術與設計  /  前端開發

前端開發:使用@supports來檢查瀏覽器支援性

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

前端開發:解決slider js垂直滑動時出現的高度問題

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

前端開發:解決SASS的禁用警告 “Using / for division is deprecated and will be removed in Dart Sass 2.0.0. “

由於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,那警告量更是驚人。若是要解決這個問題,底下提供了二個方法供您參考。

前端開發:讓你的Bootstrap4下拉選單支援多層次選單

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下拉選單可以支援多層選單

Magento PWA:如何在pwa專案中使用SASS或LESS

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

Shopify開發:如何針對不同語系顯示不同的頁尾選單

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

React JS:如何讓React dev tools支援本機網站

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

Magento PWA:如何安裝Magento PWA sample data (Venia sample data)

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

Magento2:如何將購物車的同意條款移到畫面底下

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

Magento2:如何將購物車的結帳按鈕移到畫面最底下

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

前端開發小學堂(一)如何限制按下Enter就送出表單與勾選框的可勾選數量

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

Forking Workflow的介紹

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