سلام توی این پست میخوام در رابطه با یه سری از کاربردهای start و end که توی css ویژگی های بسیار جذابی دارن توضیح بدم. اگه شما هم به css علاقه مند هستید خوشحال میشم تا آخر این پست با من همراه باشید.
این start و end چی هستند؟ چه وقتایی ما بهشون نیاز داریم؟
خب همونطور که از اسم این دوتا پیداست یکی برای “شروع” و اون یکی برای “پایان” استفاده میشه. خب این یعنی چی؟ هر کسی که با css سر و کار داشته میدونه که اگه ما بخوایم مثلا به یه المنت استایل از راست یا چپ بدیم باید از right یا left استفاده کنیم مثل چند تا نمونه ای که این زیر براتون گذاشتم.
- margin-right یا margin-left (فاصله بیرونی المنت از راست و چپ)
- padding-right یا padding-left (فاصله داخلی المنت از راست یا چپ)
- border-right یا border-left (بردر یا همون حاشیه از راست یا چپ)
ما در واقع با این سبک استایل نویسی در واقع هیچ اشاره ای به دایرکشن (direction) صفحه نداریم اگه بخوام کامل تر توضیح بدم، فرض کنید ما داریم یک قالب برای یک وبسایت طراحی می کنیم و قراره که این وبسایت به زبان فارسی باشه و توی زبان فارسی چینش المنت ها از سمت راست شروع میشه و وقتی توی direction تگ HTML مقدار rtl رو بدیم این کار انجام میشه و بعد نوبت به استایل دهی هر المنت و بخش میرسه الان کاری که ما می کنیم مثلا یه تگ h1 توی صفحه داریم و میخوایم یه حاشیه اول این متن اضافه بشه که میشه سمت راست؛ پس کدی که می نویسیم به شکل زیر خواهد بود.
h1 {
border-right:1px solid #000;
}ولی خب اگه الان بخوایم direction صفحه رو تغییر بدیم یا بهتره بگم قالبی که طراحی کردیم رو برای یه سایت انگلیسی یا دو زبانه قرار بدیم باید یه استایل مجزا برای المنت ها در نظر بگیریم. دلیلشم اینه که وقتی توی direction با مقدار ltr صفحه لود میشه در واقع المنت h1 ما اومده سمت چپ اما حاشیه باز هم سمت راست h1 ما نشون داده میشه که میشه آخر متن و این مسئله باعث میشه که ما به یک فایل css مجزا برای چینش ltr صفحه نیاز داشته باشیم.
چطوری ازشون استفاده کنیم؟
خیلی راحت، مثال بالا رو در نظر بگیرید که میخواید به اول تیتر حاشیه بدید، کافیه به شکل زیر کدتون رو بنویسید:
h1 {
border-inline-start:1px solid #000;
}توی کد بالا ما در واقع به ابتدای h1 صفحه، حاشیه ای به مقدار 1px دادیم و اگه کامل تر بخوایم توضیح بدیم وقتی از inline-start استفاده میکنیم در واقع به css میگیم “افقی از شروع” که inline همون افقی بودن و start شروع رو تعیین میکنه پس اگه دایرکشن صفحه روی rtl باشه حاشیه در سمت راست h1 و اگه ltr باشه در سمت چپ h1 قرار می گیره.
یه نکته جالب: در کد بالا اگه بجای inline از block استفاده کنید start در واقع بالای h1 خواهد بود چون شروع رو در حالت عمودی در نظر میگیره که به نظر من زیاد کاربرد نداره و فقط خواستم بدونید.(خود من بیشتر از top یا bottom استفاده میکنم.) مگر این که مثلا بخواید بگید که فلان المنت از بالا و پایین فاصله بگیره یا از بالا پایین حاشیه داشته باشه که نمونه کدهاشو میزارم:
کد حاشیه یا همون border از بالا و پایین:
h1 {
border-block:1px solid #000;
}حالا همون کد بالا منتها در خط افقی که به چپ و راست h1 حاشیه اضافه میکنه:
h1 {
border-inline:1px solid #000;
}خب این یعنی وقتی ما start یا end رو تعیین نکنیم هر مقدار و هر استایل که وارد کنیم بسته به inline یا block بودن توی خط افقی یا عمودی اجرا میشه و کلیت ماجرا اینه و تمام.
یادتون باشه که اصلا چیز سختی نیست و مهم اینه که این چهار تا رو توی ذهن داشته باشید:
- start
- end
- inline
- block
و با تلفیق همیناس که دیگه کارتون تو استایل نویسی خیلی راحت میشه و من برای راحتی شما چند نمونه رو واستون لیست میکنم که میتونید با اونا این کار رو انجام بدید:
- margin بعنوان مثال (margin-inline , margin-block , margin-inline-end)
- padding (مثل نمونه بالا)
- border
- حتی border-radius
- inset که در واقع همون right , left , bottom , top خودمون هست البته مقدار بعدی که باهاش تلفیق میکنید معین میکنه که المنت دقیقا از کجا چه مقدار فاصله ای داشته باشه. مثال اینم ببینید:
h1 {
position: absolute;
inset-block-end: 30px;
}توی کد بالا اگه direction صفحه rtl باشه h1 در پایین صفحه یا div که هست قرار میگیره و اگه هر کدوم از مقادیر block یا end رو تغییر بدید محل قرار گیری اونم تغییر میکنه. خب امیدوارم این آموزش واستون مفید بوده باشه و ممنون میشم شمام نظراتتون رو بگید و این که شما از این سبک استایل نویسی استفاده میکنید یا همون روش قبلی که استفاده میکردیم رو ترجیح میدید؟
خسته نباشی.
کمی مبهم بود در نوشتههای بعدی سعی کن کمی واضحتر بنویسی.