لیست تقلب CSS! ده ترفند کاربردی CSS
ماهیت آبشاری CSS گاهی درک و استفاده از آن را دشوار می کند. توسعه دهندگان در همه سطوح معمولاً تلاش می کنند تا بفهمند که چگونه از برخی ویژگی ها استفاده کنند و شما اغلب در حال گوگل کردن یا کمک گرفتن از یک همکار خود هستید. بنابراین ، وقتی با CSS روبرو هستید، به خود سخت نگیرید- این برای همه اتفاق می افتد!
از آنجا که CSS می تواند رمز آلود و و با ترفند همراه باشد، اگر امیدوارید که آن را یاد بگیرید و بفهمید، شما هم باید حیله گر باشید! به همین دلیل است که در این مقاله، ۱۰ ترفند عالی CSS را برای شما آورده ایم که به عنوان یک توسعه دهنده کار را برای شما آسان تر می کند، به خصوص اگر مبتدی باشید.
۰۱
نحوه رفع اسکرول افقی در یک صفحه وب در CSS
اگر در حال طراحی یک صفحه وب هستید و یک نوار اسکرول افقی در پایین مشاهده می کنید، باید عنصری را پیدا کنید که دارای پهنای بیشتر از عرض صفحه موجود باشد.
به عنوان مثال، در تصویر زیر ، می توانید یک اسکرول افقی را ببینید:
با استفاده از قوانین زیر می توانید از universal selector (*) برای یافتن عنصر مقصر استفاده کنید:
* {
border: 2px solid red;
}
این کد حاشیه قرمز ۲ پیکسل را برای هر عنصر صفحه اعمال می کند و بنابراین می توانید به راحتی بفهمید کدام عنصر را باید تنظیم کنید.
پس از استفاده از سبک فوق ، این نتیجه است:
می بینید که موج سبز دوم باعث اسکرول افقی می شود. این بدان دلیل است که عرض روی ۱۴۰۰px تنظیم شده است که از عرض صفحه موجود ۱۲۰۰px وسیع تر است.
.wave2 {
width: 1400px;
}
تنظیم مجدد عرض به ۱۲۰۰ پیکسل یا حذف کامل آن، مسئله را برطرف می کند بنابراین دیگر هیچ اسکرول افقی وجود ندارد.
۰۲
نحوه چشم پوشی از استایل در CSS
در برخی موارد خاص، ممکن است بخواهید سبک خاصی را که از قبل وجود دارد (مانند library) نادیده بگیرید. یا ممکن است قالبی(template) با یک شیت استایل بزرگ داشته باشید که بخواهید بخشی از آن را سفارشی سازی کنید.
در این شرایط، شما می توانید قوانین خاص CSS را اعمال کنید، یا می توانید ازاستثنای important! در مقابل قانون (rule) خود استفاده کنید.
در مثال زیر، important! به هر عنصر h1 یک رنگ سبز زمردی با کد رنگ #۲ecc71 می دهد:
h1 {
color: #2ecc71 !important;
}
اما مواظب باشید – استفاده از این استثنا عملی نادرست تلقی می شود و تا آنجا که ممکن است باید از بکارگیری آن اجتناب کنید.
چرا؟ خُب، important! در حقیقت ماهیت آبشار CSS را می شکند و می تواند اشکال زدایی را دشوارتر کند.
بهترین مورد استفاده برای important! استفاده از آن برای شناسایی مشکلی در پایگاه کد شما هنگام مواجهه با یک stylesheet بزرگ از الگوها یا کدهای قدیمی است. درنتیجه می توانید به سرعت مشکل را برطرف کرده و استثنا را برطرف کنید.
به جای استفاده از important! برای استفاده از سبک ها، می توانید درباره خواص CSS بیشتر بیاموزید و از این قوانین آن استفاده کنید.
۰۳
نحوه ساخت مربع با CSS
اگر می خواهید یک مربع درست کنید بدون اینکه زیاد با عرض و ارتفاع دگیر شوید، می توانید با به Div استایل بدهید(یا بنا به موردی که به آن برمیخورید به span استایل دهید). با تنظیم رنگ پس زمینه، پهنای مورد نظر و نسبت ابعادِ معادل شکلِ شما می توانید این کار را به انجام برسانید.
این کار را می توانید جلوتر با دو شکل برای ساخت مستطیل و هر مربع دیگری که می خواهید ادامه دهید.
<div class="square"></div>
.square {
background: #2ecc71;
width: 25rem;
aspect-ratio: 1/1;
}
۰۴
چگونه می توان یک div را با CSS وسط چین کنیم
با بزرگتر شدن استایل شیت، وسط چین کردن یک div می تواند بسیار دشوار باشد. برای استایل دادن به هر div، یک نمایش بلوک Block display، یک مارجین خودکار و یک پهنای کمتر از ۱۰۰٪ به آن بدهید.
<div class="center"></div>
.center {
background-color: #2ecc71;
display: block;
margin: auto;
width: 50%;
height: 200px;
}
۰۵
نحوه حذف Padding اضافی در یک باکس در CSS
استفاده از اندازه گیری باکس: حاشیه(border) باکس اطمینان حاصل می کند پدینگ اضافه ای به باکش شما هنگام تنظیم پهنا و پدینگ، به آن اضافه نمی شود. این به شما کمک می کند تا چیدمان های(layout) شما بسیار زیباتر به نظر برسند.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
۰۶
نحوه ساختن دراپ کپ(Drop Cap) با CSS
می توانید حرف اول یک عبارت یک دراپ کپ(Drop Cap) درست کنید. آره! این مورد رو بیشتر در روزنامه های خارجی دیده اید!
عنصر HTML مناسب را انتخاب کنید و استایل را مانند زیر بکار ببرید:
<p class="texts">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
quae, assumenda rerum.
</p>
p.texts::first-letter {
font-size: 200%;
color: #2ecc71;
}
۰۷
نحوه ایجاد متن با حروف بزرگ و کوچک در CSS
حروف بزرگ یا کوچک لازم نیست که مستقیماً از HTML شما بیایند. می توانید هر متنی را در CSS خود بزرگ یا کوچک بنویسید.
امیدوارم گزینه های SentenceCase و tOGGLEcASE در آینده وجود داشته باشند. اما چرا به هر حال می خواهید متن را به صورت tOGGLEcASE بسازید؟
<p class="upper">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>
.upper {
text-transform: uppercase;
}
.lower {
text-transform: lowercase;
}
۰۸
چگونه متغیرها را معین کنیم تا CSS ها تکرار نشوند؟!
می توانید متغیرها را در CSS اعلام کنید. هنگامی که متغیرها را اعلام می کنید، می توانید از آنها در تعداد دیگری از استایل ها استفاده کنید. اگر چیزی برای تغییر دارید، فقط آن متغیر را تغییر می دهید و نتیجه در هر کجا که استفاده می شود منعکس می شود. این به شما کمک می کند تا کد CSS خود را اصطلاحا DRY (مخفف Don’t Repeat Yourself به معنای “خود را تکرار نکنید” می باشد) نگه دارید.
می توانید یک متغیر را با قرار دادن آن در root scope اعلام کنید تا در stylesheet گلوبال اعمال شود. برای استفاده از متغیر خود، این ویژگی را در داخل آکولاد کنار کلمه کلیدی “var” قرار دهید.
معمول است که متغیر (ها) را در بالای استایل شیت – یعنی قبل از بازنشانی ها(ریست ها) – اعلام کنید.
:root {
--text-color: hsl(145, 63%, 49%);
}
p {
color: var(--text-color);
}
۰۹
نحوه استفاده انتخابگرهای before: و after: برای افزودن محتوای اضافی به CSS شما
انتخابگر before: در CSS به شما کمک می کند قبل از یک عنصر محتوا را وارد کنید.
<p class="texts">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
minima.
</p>
p.texts::before {
content: "Some Lorem Texts: ";
color: #2ecc71;
font-weight: bolder;
}
انتخابگر after: نیز همان کار را انجام می دهد، اما محتوا را بعد از عنصر وارد می کند.
p.texts::after {
content: " Those were Some Lorem Texts";
color: #2ecc71;
font-weight: bolder;
}
۱۰
نحوه اسکرول روان با CSS محض
بدون نیاز به نوشتن جاوا اسکریپت پیچیده یا استفاده از پلاگین، می توانید اسکرول روان را در یک صفحه وب اعمال کنید. بنابراین اگر تگ انکر دارید که به چندین بخش در صفحه وب لینک دارند و روی آنها کلیک می کنید، اسکرول روان می باشد.
html {
scroll-behavior: smooth;
}
دیدگاهتان را بنویسید