استایل عناصر جایگزین در CSS — آموزش CSS (بخش هفدهم)

۱۹۶ بازدید
آخرین به‌روزرسانی: ۱۲ شهریور ۱۴۰۲
زمان مطالعه: ۱۰ دقیقه
استایل عناصر جایگزین در CSS — آموزش CSS (بخش هفدهم)

در این مقاله به بررسی شیوه رفتار CSS با برخی عناصر خاص می‌پردازیم. تصاویر، دیگر انواع مدیا و عناصر فرم نسبت به باکس‌های معمولی، رفتار نسبتاً متفاوتی برحسب امکان استایل‌بندی با CSS دارند. درک این تفاوت و این که چه کارهایی روی این عناصر خاص ممکن و چه کارهایی ناممکن است، کمک زیادی به ما می‌کند. در این مقاله روش کار با استایل عناصر جایگزین در CSS را توضیح خواهیم داد. جهت مطالعه بخش قبلی این سری مقالات آموزشی روی لینک زیر کلیک کنید:

عناصر جایگزین

تصاویر و ویدئوها به نام «عناصر جایگزین» (Replaced Elements) توصیف می‌شوند. معنی این حرف آن است که CSS نمی‌تواند روی لی‌آوت داخلی این عناصر تأثیری بگذارد و تنها موقعیت آن‌ها را در صفحه در میان عناصر دیگر تنظیم می‌کند. البته چنان که خواهیم دید کارهای مختلفی وجود دارند که CSS می‌تواند روی تصاویر اجرا کند.

عناصر جایگزین خاصی مانند تصاویر و ویدئوها عموماً دارای «نسبت ابعادی» (aspect ratio) هستند. این بدان معنی است که دارای اندازه‌ای در هر دو بعد افقی (X) و عمودی (Y) هستند و به طور پیش‌فرض با استفاده از ابعاد ذاتی فایل نمایش می‌یابند.

اندازه‌بندی تصاویر

همچنان که در بخش‌های قبلی این سری مقالات آموزشی دیدم، همه چیز در CSS یک باکس تولید می‌کند. اگر یک تصویر را درون یک باکس قرار دهید که کوچک‌تر یا بزرگ‌تر از ابعاد ذاتی فایل تصویر در هر یک از جهات باشد، یا کوچک‌تر از باکس دیده می‌شود و یا از آن خارج و اصطلاحاً «سرریز» (overflow) می‌شود. در این حالت باید در مورد این که با این سرریز چطور رفتار کنید، تصمیمی بگیرید.

در مثال زیر دو باکس داریم که اندازه هر دو 200 است:

  • یکی شامل تصویری است که کمتر از 200 پیکسل دارد. این تصویر کوچک‌تر از باکس است و برای پر کردن باکس کشیده نمی‌شود.
  • تصویر دوم بزرگ‌تر از 200 پیکسل است و از باکس سرریز می‌شود.

استایل عناصر جایگزین در CSS

1.box {
2  width: 200px;
3}
4
5img {
6
7}
1<div class="wrapper">
2  <div class="box"><img src="star.png" alt="star"></div>
3  <div class="box"><img src="balloons.jpg" alt="balloons"></div>
4</div>

برای حل مشکل فوق در بخش قبلی (+) دیدیم که یک تکنیک رایج این است که مقدار max-width را به اندازه %100 تصویر تنظیم کنیم. بدین ترتیب تصویر می‌تواند کوچک‌تر از باکس باشد، اما نمی‌تواند از آن بزرگ‌تر شود. این تکنیک در مورد دیگر عناصر جایگزین مانند <video> و <iframe> نیز کار می‌کند.

در مورد تصاویر درون کانتینرها تصمیم‌های دیگری نیز می‌توانید بگیرید. برای نمونه ممکن است بخواهید اندازه یک تصویر را طوری تعیین کنید که به طور کامل یک باکس را پوشش دهد. مشخصه object-fit در این موارد می‌تواند کمک کند. زمانی که از object-fit استفاده می‌کنید، عنصر جایگزین می‌تواند طوری اندازه‌بندی شود که به روش‌های مختلف با اندازه باکس تطبیق پیدا کند.

در ادامه از مقدار cover استفاده کرده‌ایم که موجب کاهش اندازه عکس می‌شود و نسبت ابعادی را نیز حفظ می‌کند، به طوری که به خوبی درون باکس جای می‌گیرد. از آنجا که نسبت ابعادی حفظ شده است، بخش‌هایی از تصویر از سوی باکس برش خواهد یافت.

استایل عناصر جایگزین در CSS

1.box {
2  width: 200px;
3  height: 200px;
4}
5
6img {
7  height: 100%;
8  width: 100%;
9}
10
11.cover {
12  object-fit: cover;
13}
14
15.contain {
16  object-fit: contain;
17}
1<div class="wrapper">
2  <div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
3  <div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
4</div>

اگر از contain به عنوان مقدار این مشخصه استفاده کنیم، تصویر تا زمانی که به قدر کافی برای جا گرفتن درون باکس برسد، کوچک خواهد شد. در نتیجه در صورتی که نسبت ابعادی تصویر با باکس یکسان باشد، دقیقاً درون آن جای می‌شود. همچنین می‌توانید از مقدار fill استفاده کنید که باکس را پر می‌کند، اما نسبت ابعادی را حفظ نمی‌کند.

عناصر جایگزین در لی‌آوت

زمانی که از تکنیک‌های مختلف لی‌آوت CSS روی عناصر جایگزین بهره می‌گیرید، ممکن است متوجه شوید که نسبت به عناصر دیگر رفتار نسبتاً متفاوتی نشان می‌دهند. برای نمونه در یک لی‌آوت flex یا grid عناصر به صورت پیش‌فرض برای پر کردن کل مساحت کشیده می‌شوند. تصاویر کشیده نمی‌شوند و به جای آن با نقطه آغازین مساحت grid یا کانتینر felx همراستا می‌شوند.

در مثال زیر دو ستون و دو کانتینر grid ردیفی داریم که چهار آیتم در آن قرار دارد. همه عناصر <div> دارای رنگ پس‌زمینه هستند و کشیده می‌شوند تا ردیف و ستون را پر کنند. با این حال تصویر کشیده نمی‌شود.

استایل عناصر جایگزین در CSS

1.wrapper {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  grid-template-rows: 200px 200px;
5  gap: 20px;
6}
7
8.wrapper > div {
9  background-color: rebeccapurple;
10  border-radius: .5em;
11}
1<div class="wrapper">
2  <img src="star.png" alt="star">
3  <div></div>
4  <div></div>
5  <div></div>
6</div>

اگر به صورت مرتب پیگیر بخش‌های قبلی این سری مقالات آموزشی بوده باشید، هنوز با لی‌آوت آشنا نشده‌اید، چون در بخش‌های آتی در مورد آن صحبت خواهیم کرد. کافی است به خاطر داشته باشید که عناصر جایگزین در زمانی که بخشی از یک لی‌آوت grid یا felx باشند، رفتارهای متفاوتی دارند و این تفاوت اساساً به این جهت است که از کشیده شدن آن‌ها از سوی لی‌آوت جلوگیری شود.

برای این که الزام کنیم یک تصویر کشیده شود تا سلول grid را که در آن قرار دارد پر کند، باید کاری مانند زیر انجام دهید:

1img {
2  width: 100%;
3  height: 100%;
4}

با این حال این کار تصویر را می‌کشد و از این رو احتمالاً آن چیزی نیست که می‌خواستید انجام دهید.

عناصر فرم

عناصر فرم نیز در زمان استایل‌بندی با CSS ممکن است رفتار پیچیده‌ای داشته باشند. در یکی از مقالات بعدی این سری آموزشی با عنوان «ماژول فرم‌های وب» به بررسی تفصیلی جنبه‌های پیچیده استایل‌بندی عناصر فرم خواهیم پرداخت. اما چند نکته مقدماتی وجود دارند که باید در این مقاله مورد اشاره قرار گیرند.

بسیاری از کنترل‌های فرم به روش عنصر <input> به صفحه اضافه می‌شوند. این تگ از فیلدهای ساده فرم مانند ورودی‌های متنی تا فیلدهای پیچیده‌تر که در HTML5 اضافه شده‌اند، مانند انتخاب‌گرهای رنگ و تاریخ را تعریف می‌کند. برخی عناصر دیگر نیز مانند <textarea> یا ورودی متن چندخطی و همچنین عناصر مورد استفاده برای برچسب‌گذاری بخش‌هایی از فرم مانند <fieldset> و <legend> وجود دارند.

HTML5 نیز شامل خصوصیت‌هایی است که به توسعه‌دهندگان وب امکان می‌دهد تا تعیین کنند کدام فیلدها الزامی هستند و یا حتی نوع محتوایی که باید وارد شود از چه نوع است. اگر کاربر مقدار نامربوطی وارد کند یا فیلد الزامی را خالی بگذارد، مرورگر می‌تواند پیام خطایی نمایش دهد. مرورگرهای مختلف در مورد شیوه استایل‌بندی و سفارشی‌سازی این آیتم‌ها روش واحدی ندارند.

استایل‌بندی عناصر ورودی متنی

استایل‌بندی عناصری که برای وارد کردن متن استفاده می‌شوند مانند <"input type="text>، انواع خاصی مانند <"input type="email> و عنصر <textarea> کاملاً ساده است و تقریباً شبیه دیگر باکس‌های صفحه رفتار می‌کنند. استایل‌بندی پیش‌فرض این عناصر بر اساس سیستم عامل و مرورگری که کاربر از آن برای بازدید وب‌سایت استفاده کرده است متفاوت خواهد بود.

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

استایل عناصر جایگزین در CSS

1input[type="text"],
2input[type="email"] {
3  border: 2px solid #000;
4  margin: 0 0 1em 0;
5  padding: 10px;
6  width: 100%;
7}
8
9input[type="submit"] {
10  border: 3px solid #333;
11  background-color: #999;
12  border-radius: 5px;
13  padding: 10px 2em;
14  font-weight: bold;
15  color: #fff;
16}
17
18input[type="submit"]:hover {
19  background-color: #333;
20}
1<form>
2  <div><label for="name">Name</label>
3  <input type="text" id="name"></div>
4  <div><label for="email">Email</label>
5  <input type="email" id="email"></div>
6
7  <div class="buttons"><input type="submit" value="Submit"></div>
8</form>

نکته مهم: در مورد تغییر دادن استایل‌بندی عناصر فرم باید مراقب باشید و مطمئن شوید که در هر حالت برای کاربر مشخص شده است که این‌ها عنصر فرم هستند. ممکن است یک ورودی فرم بدون حاشیه و رنگ پس‌زمینه ایجاد کنید که از محتوای پیرامون فرم قابل تشخیص نباشد، اما در این حالت احتمالاً کاربر نمی‌تواند فرم را تشخیص داده و محتوای آن را پر کند.

چنان که در یکی از بخش‌های آینده با عنوان «استایل‌بندی فرم» توضیح خواهیم داد، بسیاری از انواع پیچیده‌تر ورودی‌ها از سوی سیستم عامل رندر می‌شوند و امکان استایل‌بندی آن‌ها وجود ندارد. از این رو باید همواره فرض کنید که فرم‌ها قرار است برای بازدیدکنندگان مختلف به طرز متفاوتی نمایش یابند و فرم‌های پیچیده را در چند مرورگر مختلف تست کنید.

وراثت و عناصر فرم

عناصر فرم در برخی مرورگرها به صورت پیش‌فرض استایل‌بندی فونت را به ارث نمی‌برند. از این رو اگر می‌خواهید مطمئن شوید که فیلدهای فرم از فونت تعریف شده در بدنه صفحه یا یک عنصر والد استفاده می‌کنند باید از قاعده CSS زیر استفاده کنید:

1button, 
2input, 
3select, 
4textarea { 
5  font-family : inherit; 
6  font-size : 100%; 
7}

عناصر فرم و box-sizing

عناصر فرم در مرورگرهای مختلف از قواعد متفاوت box-sizing برای ویجت‌های گوناگون استفاده می‌کنند. در مورد مشخصه box-sizing در یکی از بخش‌های قبلی با عنوان «مدل جعبه‌ای در CSS» توضیح دادیم. از این اطلاعات می‌توانید در زمان استایل‌بندی فرم‌ها استفاده کنید تا اطمینان پیدا کنید که با تعیین ارتفاع و عرض برای عناصر فرم، همه کاربران تجربه کاربری یکسانی خواهند داشت.

جهت حفظ انسجام تجربه کاربری بهتر است لبه‌ها و فاصله‌گذاری‌ها برای همه عناصر روی 0 تنظیم شود. سپس این موارد در زمان استایل‌بندی کنترل‌های خاص اضافه شوند.

1button, 
2input, 
3select, 
4textarea {  
5  box-sizing: border-box; 
6  padding: 0;
7  margin: 0; 
8}

تنظیمات مفید دیگر

علاوه بر قواعدی که در بخش فوق اشاره شد، باید از تنظیمات overflow: auto نیز روی <textarea> استفاده کنید تا مرورگر IE در مواردی که نیازی به نوار اسکرول وجود ندارد، آن را نشان ندهد:

1textarea {
2  overflow: auto;
3}

جمع‌بندی همه چیز در reset

به عنوان آخرین گام می‌توانیم همه مشخصه‌های مختلف بررسی شده فوق را در بخش زیر با عنوان form reset قرار دهیم تا مبنای منسجمی برای کار کردن به دست آوریم. بدین ترتیب همه آیتم‌های مورد اشاره در سه بخش قبلی گرد هم می‌آیند:

1button, 
2input, 
3select, 
4textarea { 
5  font-family: inherit; 
6  font-size: 100%; 
7  box-sizing: border-box; 
8  padding: 0; margin: 0; 
9} 
10
11textarea { 
12  overflow: auto; 
13}

نکته: استایل‌شیت‌های نرمالایزر از سوی بسیاری از توسعه‌دهندگان برای ایجاد مجموعه‌ای از استایل‌های مبنا جهت به‌کارگیری در پروژه‌های مختلف مورد استفاده قرار می‌گیرد. این استایل‌ها به طور معمول کارهایی مانند آن چه در بخش‌های قبلی توضیح دادیم استفاده می‌شوند تا مطمئن شویم که همه موارد مختلف در مرورگرها، پیش از اجرای استایل‌بندی در CSS دارای یک مقدار پیش‌فرض منسجم است. این موارد امروزه به اندازه گذشته مهم نیستند، چون اینک مرورگرها عموماً منسجم‌تر از قبل شده‌اند. با این حال اگر می‌خواهید نمونه‌ای از یک استایل‌شیت نرمالایزر را ببینید، به کد زیر توجه کنید که از سوی بسیاری از توسعه‌دهندگان به عنوان مبنایی در اغلب پروژه‌ها مورد استفاده قرار می‌گیرد.

فایل Normalize.css (+)

1/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2
3/* Document
4   ========================================================================== */
5
6/**
7 * 1. Correct the line height in all browsers.
8 * 2. Prevent adjustments of font size after orientation changes in iOS.
9 */
10
11html {
12  line-height: 1.15; /* 1 */
13  -webkit-text-size-adjust: 100%; /* 2 */
14}
15
16/* Sections
17   ========================================================================== */
18
19/**
20 * Remove the margin in all browsers.
21 */
22
23body {
24  margin: 0;
25}
26
27/**
28 * Render the `main` element consistently in IE.
29 */
30
31main {
32  display: block;
33}
34
35/**
36 * Correct the font size and margin on `h1` elements within `section` and
37 * `article` contexts in Chrome, Firefox, and Safari.
38 */
39
40h1 {
41  font-size: 2em;
42  margin: 0.67em 0;
43}
44
45/* Grouping content
46   ========================================================================== */
47
48/**
49 * 1. Add the correct box sizing in Firefox.
50 * 2. Show the overflow in Edge and IE.
51 */
52
53hr {
54  box-sizing: content-box; /* 1 */
55  height: 0; /* 1 */
56  overflow: visible; /* 2 */
57}
58
59/**
60 * 1. Correct the inheritance and scaling of font size in all browsers.
61 * 2. Correct the odd `em` font sizing in all browsers.
62 */
63
64pre {
65  font-family: monospace, monospace; /* 1 */
66  font-size: 1em; /* 2 */
67}
68
69/* Text-level semantics
70   ========================================================================== */
71
72/**
73 * Remove the gray background on active links in IE 10.
74 */
75
76a {
77  background-color: transparent;
78}
79
80/**
81 * 1. Remove the bottom border in Chrome 57-
82 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 */
84
85abbr[title] {
86  border-bottom: none; /* 1 */
87  text-decoration: underline; /* 2 */
88  text-decoration: underline dotted; /* 2 */
89}
90
91/**
92 * Add the correct font weight in Chrome, Edge, and Safari.
93 */
94
95b,
96strong {
97  font-weight: bolder;
98}
99
100/**
101 * 1. Correct the inheritance and scaling of font size in all browsers.
102 * 2. Correct the odd `em` font sizing in all browsers.
103 */
104
105code,
106kbd,
107samp {
108  font-family: monospace, monospace; /* 1 */
109  font-size: 1em; /* 2 */
110}
111
112/**
113 * Add the correct font size in all browsers.
114 */
115
116small {
117  font-size: 80%;
118}
119
120/**
121 * Prevent `sub` and `sup` elements from affecting the line height in
122 * all browsers.
123 */
124
125sub,
126sup {
127  font-size: 75%;
128  line-height: 0;
129  position: relative;
130  vertical-align: baseline;
131}
132
133sub {
134  bottom: -0.25em;
135}
136
137sup {
138  top: -0.5em;
139}
140
141/* Embedded content
142   ========================================================================== */
143
144/**
145 * Remove the border on images inside links in IE 10.
146 */
147
148img {
149  border-style: none;
150}
151
152/* Forms
153   ========================================================================== */
154
155/**
156 * 1. Change the font styles in all browsers.
157 * 2. Remove the margin in Firefox and Safari.
158 */
159
160button,
161input,
162optgroup,
163select,
164textarea {
165  font-family: inherit; /* 1 */
166  font-size: 100%; /* 1 */
167  line-height: 1.15; /* 1 */
168  margin: 0; /* 2 */
169}
170
171/**
172 * Show the overflow in IE.
173 * 1. Show the overflow in Edge.
174 */
175
176button,
177input { /* 1 */
178  overflow: visible;
179}
180
181/**
182 * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 * 1. Remove the inheritance of text transform in Firefox.
184 */
185
186button,
187select { /* 1 */
188  text-transform: none;
189}
190
191/**
192 * Correct the inability to style clickable types in iOS and Safari.
193 */
194
195button,
196[type="button"],
197[type="reset"],
198[type="submit"] {
199  -webkit-appearance: button;
200}
201
202/**
203 * Remove the inner border and padding in Firefox.
204 */
205
206button::-moz-focus-inner,
207[type="button"]::-moz-focus-inner,
208[type="reset"]::-moz-focus-inner,
209[type="submit"]::-moz-focus-inner {
210  border-style: none;
211  padding: 0;
212}
213
214/**
215 * Restore the focus styles unset by the previous rule.
216 */
217
218button:-moz-focusring,
219[type="button"]:-moz-focusring,
220[type="reset"]:-moz-focusring,
221[type="submit"]:-moz-focusring {
222  outline: 1px dotted ButtonText;
223}
224
225/**
226 * Correct the padding in Firefox.
227 */
228
229fieldset {
230  padding: 0.35em 0.75em 0.625em;
231}
232
233/**
234 * 1. Correct the text wrapping in Edge and IE.
235 * 2. Correct the color inheritance from `fieldset` elements in IE.
236 * 3. Remove the padding so developers are not caught out when they zero out
237 *    `fieldset` elements in all browsers.
238 */
239
240legend {
241  box-sizing: border-box; /* 1 */
242  color: inherit; /* 2 */
243  display: table; /* 1 */
244  max-width: 100%; /* 1 */
245  padding: 0; /* 3 */
246  white-space: normal; /* 1 */
247}
248
249/**
250 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 */
252
253progress {
254  vertical-align: baseline;
255}
256
257/**
258 * Remove the default vertical scrollbar in IE 10+.
259 */
260
261textarea {
262  overflow: auto;
263}
264
265/**
266 * 1. Add the correct box sizing in IE 10.
267 * 2. Remove the padding in IE 10.
268 */
269
270[type="checkbox"],
271[type="radio"] {
272  box-sizing: border-box; /* 1 */
273  padding: 0; /* 2 */
274}
275
276/**
277 * Correct the cursor style of increment and decrement buttons in Chrome.
278 */
279
280[type="number"]::-webkit-inner-spin-button,
281[type="number"]::-webkit-outer-spin-button {
282  height: auto;
283}
284
285/**
286 * 1. Correct the odd appearance in Chrome and Safari.
287 * 2. Correct the outline style in Safari.
288 */
289
290[type="search"] {
291  -webkit-appearance: textfield; /* 1 */
292  outline-offset: -2px; /* 2 */
293}
294
295/**
296 * Remove the inner padding in Chrome and Safari on macOS.
297 */
298
299[type="search"]::-webkit-search-decoration {
300  -webkit-appearance: none;
301}
302
303/**
304 * 1. Correct the inability to style clickable types in iOS and Safari.
305 * 2. Change font properties to `inherit` in Safari.
306 */
307
308::-webkit-file-upload-button {
309  -webkit-appearance: button; /* 1 */
310  font: inherit; /* 2 */
311}
312
313/* Interactive
314   ========================================================================== */
315
316/*
317 * Add the correct display in Edge, IE 10+, and Firefox.
318 */
319
320details {
321  display: block;
322}
323
324/*
325 * Add the correct display in all browsers.
326 */
327
328summary {
329  display: list-item;
330}
331
332/* Misc
333   ========================================================================== */
334
335/**
336 * Add the correct display in IE 10+.
337 */
338
339template {
340  display: none;
341}
342
343/**
344 * Add the correct display in IE 10.
345 */
346
347[hidden] {
348  display: none;
349}

سخن پایانی

در این مقاله در مورد برخی از تفاوت‌هایی که در زمان کار با تصاویر و مدیا و دیگر عناصر نامعمول در CSS مواجه می‌شویم صحبت کردیم. در بخش بعدی به بررسی چند نکته می‌پردازیم که در زمان استایل‌بندی جداول HTML مفید هستند.

برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
developer.mozilla
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *