Modern CSS

💎 گردش در دنیای CSS مدرن

این کتاب پر از مثال عملی، مفاهیم CSS را با نمونه‌کد، اسکرین‌شات و نمودار توضیح می‌دهد تا درک مطالب کاملاً شفاف باشد.

🚀 شروع از پایه‌ها:

سفر با مدل جعبه‌ای (Box Model)، رنگ‌ها، سلکتورها و کمبیناتورها، و درجه‌ی خاصیت (Specificity) آغاز می‌شود و قدم‌به‌قدم وارد مباحث میان‌رده می‌شوی؛ شامل استایل‌دهی متون، جایگذاری عناصر، Z-index، کانتکست‌های پشته‌ای، گرادینت‌ها، و حاشیه‌ها.

در ادامه به بخش پیشرفته‌تر می‌رسیم؛ یعنی تبدیل‌ها (Transforms)، ترنزیشن‌ها و انیمیشن‌ها، Flexbox و CSS Grid.

🧠 خیلی‌ها CSS را زبان سخت و دشواری می‌دانند چون رفتار آن گاهی گیج‌کننده به‌نظر می‌رسد، اما نویسنده در این کتاب نشان می‌دهد که می‌توان با منطق و رویکردی قابل فهم، همه‌ی پیچیدگی‌های CSS را باز کرد.

CSS مدرن بر پایه‌ی همین منطق بنا شده: هر ویژگی از اصول مشخصی پیروی می‌کند که می‌توان آن‌ها را مرحله‌به‌مرحله یاد گرفت.

✨ ویرایش جدید کتاب:

نسخه‌ی جدید این کتاب کاملاً بازنگری شده تا تغییرات CSS طی چهارسال گذشته و ویژگی‌های جدید آن را پوشش دهد.

فصل مربوط به CSS Grid به‌طور گسترده به‌روز شده و حالا شامل بخش جدیدی برای Subgridها است.

همچنین موضوعات تازه‌ای مثل:

• دستورات تو در تو (Nested CSS Rules)
• شبه‌کلاس‌های جدید :is و :has
• انیمیشن‌های وابسته به اسکرول (Scroll-driven Animations)
• Container Queries

و دیگر قابلیت‌های امروزی CSS بررسی می‌شوند.

🔧 آنچه خواهید آموخت:

• کار با سلکتورها و نحوه‌ی محاسبه‌ی Specificity
• استایل‌دهی متون و کار با فونت‌ها
• استفاده از متغیرهای CSS (Custom Properties)
• روش‌های مختلف برای Transform عناصر
• ایجاد حرکت با Transitions و Animations
• جایگذاری عناصر با Flexbox
• درک مفاهیم پایه در طراحی واکنش‌گرا (Responsive Design)

👩‍💻 مخاطبان کتاب:

مناسب برای کسانی که تا حدی با HTML و CSS کار کرده‌اند ولی هنوز در مفاهیم جدید مثل Flexbox یا Grid تسلط ندارند.

همچنین برای برنامه‌نویس‌هایی که دنبال یک مرور و بازآموزی حرفه‌ای CSS مدرن هستند.

📑 فهرست مطالب کتاب:

1. مقدمه‌ای بر CSS
2. قوانین و سلکتورهای CSS
3. مفاهیم پایه‌ی CSS
4. استایل‌دهی پایه
5. پس‌زمینه‌ها و گرادینت‌ها
6. استایل‌دهی متون
7. چیدمان و جایگذاری
8. تبدیل‌ها (Transforms)
9. ترنزیشن‌ها و انیمیشن‌ها
10. Flexbox
11. CSS Grid
12. طراحی واکنش‌گرا (Responsive Design)
13. جمع‌بندی نهایی (Wrap Up)

👨‍🏫 درباره‌ی نویسنده – جو اتاردی (Joe Attardi):

مهندس نرم‌افزار اهل بوستون با بیش از ۲۰ سال تجربه در توسعه‌ی فرانت‌اند و تخصص در فناوری‌های JavaScript، TypeScript، HTML و CSS.

او تجربه‌ی ساخت رابط‌های کاربری سطح بالا برای شرکت‌هایی مثل Dell، Constant Contact، و Salesforce را دارد.

از آثار او می‌توان به کتاب‌های:

• Using Gatsby and Netlify CMS (ناشر: Apress، سال ۲۰۲۰)
• Web API Cookbook (ناشر: O’Reilly، سال ۲۰۲۴)

او در شبکه‌ی X با نام کاربری @JoeAttardi فعال است.

✨ جمع‌بندی برای توسعه‌دهنده‌ها:

این کتاب نقشه‌ی راهی شفاف و کاربردی برای تسلط بر CSS مدرن است — از اصول پایه تا تکنیک‌های حرفه‌ای و انیمیشن‌های روان، از Gridهای تو در تو گرفته تا Container Queries.

با رویکردی تمرین‌محور و مثال‌محور، یاد می‌گیری واقعاً CSS را، نه فقط حفظش.

Come on a tour of modern CSS. This example-driven book demonstrates the concepts by showing code examples, screenshots, and diagrams to help clearly communicate the information.

You’ll start with the very basics of CSS: box model, colors, selectors and combinators, and specificity. Then gradually move through more intermediate topics – styling text, positioning, Z-index and stacking contexts, gradients, borders, and then to more advanced topics such as transforms, transitions, animations, flexbox, and CSS grid.

There is a lot of discussion about how hard CSS is, and how intimidated some people are by it, but it doesn’t have to be this way. Modern CSS uses a logical and understandable approach to break down and clearly explain the ins and outs of CSS.

This new edition has been fully updated keeping in mind the changes that CSS has undergone in the last four years and the new features and APIs that have been introduced. The chapter on CSS grids has been updated extensively and now includes a section on CSS subgrids. The book will guide you through recent topics such as nested CSS rules, the :is and :has pseudo-classes, scroll-driven animations, container queries, and more.

What You’ll Learn:

• Work with the syntax of CSS selectors and calculate specificity
• Use styling techniques, fonts and text styling
• Review custom properties (variables)
• Explore the different ways an element can be transformed
• Use animating elements with CSS transitions
• Position elements using Flexbox layout
• Understand the basics of responsive design

Who This Book Is For

Anyone who has some experience with HTML, and some CSS, but might not be familiar with some of the newer concepts like flexbox or grid. Also, those looking for a refresher in those areas.

Table of Contents

Chapter 1. Introduction to CSS

Chapter 2. CSS Rules and Selectors

Chapter 3. Basic CSS Concepts

Chapter 4. Basic Styling

Chapter 5. Backgrounds and Gradients

Chapter 6. Text Styling

Chapter 7. Layout and Positioning

Chapter 8. Transforms

Chapter 9. Transitions and Animations

Chapter 10. Flexbox

Chapter 11. CSS Grid

Chapter 12. Responsive Design

Chapter 13. Wrap Up

About the Author

Joe Attardi is a software engineer from the Boston area, specializing in front-end development. He has over 20 years of experience working with web technologies such as JavaScript, TypeScript, HTML, and CSS. He has built rich front-end experiences for companies such as Dell, Constant Contact, and Salesforce. He is the author of Using Gatsby and Netlify CMS (Apress, 2020) and Web API Cookbook (O’Reilly, 2024). You can find him on X at @JoeAttardi.