內文簡介
＜內容簡介＞

本書內容改編自第14屆iThome鐵人賽Modern Web組的冠軍系列文章《防禦性CSS-建立「防患未然」的匠人心態》。本書用淺顯易懂的程式碼及貼近生活的實際情境，來探討如何培養「防患未然」的思維。由於有些畫面佈局過於單純和簡單，因此會容易忽略其潛在的破版危險，這些令人容易忽略的潛在性危險，很有可能在你最不希望它出現的時候意外出現了，小則影響畫面上的美觀，大則影響產品在客戶眼中的專業形象，進而造成商業上的損失。

本書將這些常見的案例分成八個主題，逐一探討每一個問題會發生的情境，以及提供解決這些問題的具體方法和技巧，希望在這些案例分析的過程當中，以容易上手的程式碼，帶領讀者慢慢培養「防患未然」的思考習慣，即使是一行簡單的CSS，也能夠充分展現專業的程式設計態度。

★本書特色：

事前防範勝過事後Debug！
以八大核心主題培養「防患未然」的匠人心態！
有效對抗莫非定律，洞察無法一眼看見的潛在性危險！

♚蒐集常見案例：本書範例均為常見的實務案例
♚視覺化程式碼：透過視覺化來掌握情境及重點
♚立即解決方案：迅速理解情況，立即使用於實戰
♚清楚情境編排：不必從頭閱讀，只需看想要的主題

【目標讀者】
♚想讓自己的網頁避免不預期錯誤的前端開發者。
♚希望快速累積切版經驗的前端開發者。
♚希望讓自己的網頁能看起來更專業的開發者。
♚希望自己對於CSS不再懼怕的新手。

★名人推薦：

「這本專門探討防禦性程式設計的書中舉了許多案例，並一一說明應該事先考慮到什麼樣的狀況，以及應該怎麼利用CSS的彈性去防止頁面的跑版。書中的許多案例都是我自己以前在工作上曾經碰過的狀況，所以我能保證書中的內容絕對實用。這本書對沒有這麼多經驗的新手工程師來說特別有幫助，因為能夠及早學習到各種防禦性程式設計的技巧，並且運用在工作上。我誠心推薦這本防禦性程式設計的書籍，若是看完並且將此知識應用在工作上，絕對能提升樣式的可靠性。」
──技術部落格Huli's blog站長，Huli

「對於初學者來說，這本書不僅說明CSS的語法，更重要的是它引導讀者理解資深工程師的思考方式和解決問題的策略。對於有經驗的開發者來說，本書能夠幫助讀者回顧並整理已經學習過的知識，在溫故中學習新知。無論你是CSS的初學者還是資深工程師，我相信這本書都能夠帶給你不同的收穫。」
──PJCHENder網頁開發咩腳版主、《從Hooks開始，讓你的網頁React起來》作者，陳柏融

「這是一本讀起來很舒服、沒有壓力的專業書籍，我想只有在業界經歷過無數風雨的人，才能以如此幽默、淺顯易懂的方式，用實際案例帶讀者了解避免破版的CSS設計技巧。」
──全端工程師、暢銷書作家、ChatGPT、科普AI講師及全台第一本ChatGPT應用專書作者，林鼎淵

「魔鬼藏在細節裡，特別在開發網站時又更是如此，如果開發者能先預見到許多情境，就能更好地掌控自己的產品，提升作品的質感，節省修改程式的時間。在本書中，作者將分享自己在開發中習得的各種經驗及知識無私分享給讀者，幫助讀者在開發時能儘可能考慮到各個面向，防止各種佈局意外。對於希望在網站前端開發或網站版面設計上提升自己的人，我強烈推薦這本著作給你。」
──搞定學院學習社群創辦人、知名外商Hewlett-Packard資深工程師，Jimmy Chu

「這本書對工程師有益，對設計師和產品經理也大有幫助。在思考產品功能設計和開發時，它提供了寶貴的原理參考，成為不可或缺的指南之一。」
──Product Manager，Anderson Tu

「使用者體驗、商業策略、工程開發可行性在產品設計中都是基本要素；這本書讓我在執行設計思考可行性評估時幫助很多，是身為設計師的我在日常工作中的必備工具書。」
──UIUX Designer，Jerry Wu

「本書詳細討論了前端實戰中撰寫CSS時需要考慮的各種面向。作者將自己多年的經驗融入其中，展示了一位資深前端工程師在面對UI Mockup時思考的各種情境和細節處理。透過閱讀這本書，讀者不僅能學習到實戰技巧，還能培養在撰寫CSS時思考各種edge case的心態，這是我認為最有趣的部分之一。」
──前端工程師，Joy Hung

「作者用詼諧有趣且淺顯易懂的方式，講解防禦性的前端設計思維，讓對於前端比較不熟悉的後端工程師也能看得懂，並且能從中獲得一些不一樣的思考方式。」
──Teamt5 Backend Engineer，Jack

「這本書以淺顯易懂的方式介紹了一些CSS設計觀念，非常適合那些希望提升前端切版技能並避免常見設計缺陷的讀者。」
──Rakuten Fullstack Engineer，Lance

★目錄：

|CHAPTER 01| 防禦性程式設計簡介
1.1 什麼是防禦性程式設計

|CHAPTER 02| 不失禮貌的安全距離
2.1 標題與圖示
2.2 元件間的間距

|CHAPTER 03| 又是那令人在意的長短問題
3.1 類別標籤
3.2 過長的內容
3.3 過短的內容
3.4 固定的高度
3.5 固定的寬度

|CHAPTER 04| 放置圖片的正確姿勢
4.1 圖片比例
4.2 容易被忽略的預設背景重複
4.3 圖片失效的備案
4.4 響應式圖片設計

|CHAPTER 05| 陰魂不散的滾動條
5.1 移除不需要的滾動條
5.2 保留滾動條的空間
5.3 避免滾動穿透

|CHAPTER 06| 盒子模型的帽子戲法
6.1 內容盒子與邊框盒子
6.2 邊距重疊

|CHAPTER 07| Flexbox的彈性與不彈性
7.1 外容器的預設值
7.2 內元件的預設值
7.3 有彈性的間距

|CHAPTER 08| Grid迷宮般的內心戲
8.1 伸縮失效的子元件
8.2 自動填滿效果
8.3 釘選失效的祕密

|CHAPTER 09| 元件的態度決定高度
9.1 步驟對話框的高度
9.2 響應式高度設計

|CHAPTER 10| 讓人敬畏三分的CSS
10.1 分組選擇器
10.2 隱藏網頁上的元件
10.3 失效的z-index

＜作者簡介＞

陳泰銘（Taiming）
自2017年開始從事前端工程師工作，擁有B2C以及B2B系統開發經驗。曾於大學期間修習師資培育學程，因此對於教學及教育充滿熱忱，擅長將複雜、艱澀的技術觀念轉化為親民的白話文並分享。

2019年發起「ShareBack不藏私分享會」社群，擔任活動企劃籌備以及講師，希望建立一個不藏私、彼此教學相長的平台，讓不論本科系、非本科系的參與者從中獲得知識以及樂趣。

【iThome鐵人賽獲獎】
♚2019 Modern Web組優選：《以經典小遊戲為主題之ReactJS應用練習》
♚2021 Modern Web組佳作：《30 天擁有一套自己手刻的React UI元件庫》
♚2022 Modern Web組冠軍：《防禦性CSS-建立「防患未然」的匠人心態》

相關分類

購物須知

寄送時間	全台灣24h到貨，遲到提供100元現金積點。全年無休，週末假日照常出貨。例外說明
送貨方式	透過宅配送達。除網頁另有特別標示外，均為常溫配送。消費者訂購之商品若經配送兩次無法送達，再經本公司以電話與Email均無法聯繫逾三天者，本公司將取消該筆訂單，並且全額退款。
送貨範圍	限台灣本島與離島地區註，部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件，將送至到岸船公司碼頭，需請收貨人自行至碼頭取貨。注意！收件地址請勿為郵政信箱。註：離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。
售後服務	缺掉頁更換新品
執照證號＆登錄字號	本公司食品業者登錄字號A-116606102-00000-0

關於退貨

PChome24h購物的消費者，都可以依照消費者保護法的規定，享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀（復原至商品到貨時的原始狀態並且保持完整包裝，包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性）。商品一經拆封/啟用保固，將使商品價值減損，您理解本公司將依法收取回復原狀必要之費用(若無法復原，費用將以商品價值損失計算)，請先確認商品正確、外觀可接受再行使用，以免影響您的權利，祝您購物順心。
如果您所購買商品是下列特殊商品，請留意下述退貨注意事項：
1. 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌，依據消費者保護法之規定，於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
2. 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品，在您還不確定是否要辦理退貨以前，請勿拆封，一經拆封則依消費者保護法之規定，無法享有七天猶豫期之權益且不得辦理退貨。
3. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，一經您事先同意後始提供者，依消費者保護法之規定，您將無法享有七天猶豫期之權益且不得辦理退貨。
4. 組合商品於辦理退貨時，應將組合銷售商品一同退貨，若有遺失、毀損或缺件，PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
若您需辦理退貨，請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請，我們將於接獲申請之次日起1個工作天內檢視您的退貨要求，檢視完畢後將以E-mail回覆通知您，並將委託本公司指定之宅配公司，在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通，並備妥原商品及所有包裝及附件，以便於交付予本公司指定之宅配公司取回（宅配公司僅負責收件，退貨商品仍由特約廠商進行驗收），宅配公司取件後會提供簽收單據給您，請注意留存。
退回商品時，請以本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋），原封包裝後交付給前來取件的宅配公司；如果本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋）已經遺失，請您在商品原廠外盒之外，再以其他適當的包裝盒進行包裝，切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力，而需為您辦理退款事宜時，您同意本公司得代您處理發票或折讓單等相關法令所要求之單據，以利本公司為您辦理退款。
本公司收到您所提出的申請後，若經確認無誤，將依消費者保護法之相關規定，返還您已支付之對價（含信用卡交易），退款日當天會再發送E-mail通知函給您。

哎呀！早知道就不會破版的CSS設計技巧：前端工程師防止佈局意外的必學密技（iThome鐵人賽系列書）(軟精裝)

搜尋更多

內文簡介

相關分類