شروع کار با لایه CSS

پنج شنبه ۰۱ شهریور ۹۷ توسط محمدسینا مرادی

هدف از نوشتن این مقاله -> اینکه آیا شما تازه با CSS آشنا شده اید یا یک توسعه دهنده با تجربه در دیگر زبان ها هستید که قصد دارید بدانید چیز هایی که در مورد CSS یاد دارید یا می خواهید یاد بگیرید به روز هستند این مقاله کاملا به شما کمک می کند تا همه مفاهیم اصلی CSS ای که مربوط به امروز هستند را یاد بگیرید پس با من همراه باشد تا دستی بر چهره زیبای CSS بکشیم.

در طول چند سال گذشته، لایه CSS...

به طرز چشمگیری راه توسعه front end سایت های ما به خوبی تغییر یافته اند. در حال حاضر گزینه ای واقعی از نظر روش های استفاده شده در CSS برای توسعه سایت های مان داریم که به این معنی است که ما اغلب باید تصمیم بگیریم که کدام رویکرد را انتخاب کنیم. در این مقاله، من به درون متد های مختلف لایه بندی که برای شما در دسترس هستند می روم و پایه های چگونگی استفاده از آنها و اینکه برای چه چیزی استفاده می شوند را برایتان توضیح می دهم.

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

روند طبیعی

اگر شما دارای یک صفحه وب HTML باشید که هیچ تغییری در CSS آن ایجاد نکرده باشید، المنت ها به طور روند طبیعی یا Normal flow نمایش داده می شوند. در روند طبیعی، باکس ها یکی پشت از دیگری با سبک نوشتن سندتان نمایش داده می شود. این به این معنی است که اگر شما سبک نوشتن افقی را دارید و جمله ای دارید که از سمت چپ به راست یا راست به چپ می باشد، روند طبیعی باکس ها را در سطح بلاک المنت ها یکی پشت از دیگری به صورت عمودی در صفحه نمایش می دهد.

اگر شما سبک نوشتن عمودی داشته باشید، بعد جملات به صورت عمودی اجرا می شوند پس روند طبیعی یا Normal flow مایل است که بلاک ها را افقی تنظیم کند.

روند طبیعی جایی است که شما با هر لایه شروع می کنید: زمانی که شما لایه CSS ای می سازید، شما دارید بلاک ها را می گیرید و موجب می شوید که با آنها کار هایی انجام دهید که روند طبیعی انجام نمی دهد.

ساختار سند شما برای مزیت روند طبیعی

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

اگر CSS شما نمی تواند بارگذاری شود، کاربر می تواند هنوز هم محتوا را بخواند و کاربرانی که همه CSS را  دریافت نمی کنند (برای مثال: بعضی ها از screen reader استفاده می کنند) محتوا را به ترتیب در سند تحویل می گیرند. این باعث می شود تا از دیدگاه دسترسی، سند HTML شما، در یک نظم خوب، زندگیش را شروع کند. با این حال، همچنین باعث می شود که زندگی شما نیز به عنوان توسعه دهنده وب آسان تر شود. اگر محتوای شما به ترتیبی باشد که کاربر انتظار دارد آن را بخواند، نیازی به تغییر گسترده ای در طرح ندارید تا آن را در جای مناسبش قرار دهید. با متد های لایه جدید ممکن است شما از اینکه بدانید چقدر کم کار برای انجام دادن دارید سوپرایز شوید! {-:

بنابراین، قبل از فکر کردن درباره لایه، درباره ساختار سند تان فکر کنید و همینطور ترتیبی که می خواهید از بالای سند به پایین، محتوا خوانده شود.

حرکت به بیرون از روند طبیعی

هنگامی که ما یک سند با ساختار-خوب داریم، نیاز داریم تصمیم بگیریم که چگونه آن را به لایه دلخواهمان تبدیل کنیم. این کار، حرکت به بیرون از روند طبیعی را  برای قسمت هایی در سند ما، وارد می کند. ما مجموعه ای از متد ها برای تنظیم لایه داریم. اولین متد ی که ما می خواهیم به آن نگاهی بیندازیم float است، زیرا float ها ظاهری عالی در گرفتن یک المنت در بیرون از روند طبیعی را دارد.

Float ها

float ها برای تغییر باکس به چپ یا راست استفاده می شوند، همچنین اجازه می دهند که محتوا به دور آن پیچیده شوند.

برای ترتیب آیتم ها با float، از ویژگی CSS float و مقدار چپ یا راست استفاده می شود. مقدار پیش فرض در float هیچ کدام یا درست تر آن none می باشد.

.item {
    float: left;
}

شایان ذکر است که زمانی از float استفاده می کنید آیتم و متن دور آن wrap می شوند، اتفاقی که می افتد این است که باکس ها در آن محتوا کوتاه می شوند. اگر شما آیتم و باکس حاوی متن های تان که دارای پس زمینه تغییر یافته هستند را float کنید، می توانید ببینید رنگ پس زمینه بعد از آیتم float شده اجرا می شود.

همانند عکس زیر:

همانطور که فضاهای خطی را بین نوشتار و متن بسته بندی کوتاه می کنید، باید حاشیه ای (margin) روی آیتم float شده قرار دهید. حاشیه در متن فقط متن را از لبه container حرکت می دهد. برای یک تصویر float شده به سمت چپ، می توانید یک حاشیه را به سمت راست و پایین اضافه کنید، فرض کنید شما می خواهید تصویر با بالا و سمت چپ container تراز شود.

به کد های کوچک زیر توجه کنید.

کد زیر مربوط به HTML است:

<div class="container">
  <div class="item"></div>

  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>

  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

کد زیر مربوط به CSS است:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  background: ;
}

.item {
  width:100px;
  height: 100px;
  float: left;
  margin: 0 20px 20px 0;
  background-color: rgba(500,21,27,.30);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

پاکسازی float ها

هنگامی که یک المنت را float کرده اید، تمام المنت ها در اطراف این المنت float شده قرار می گیرند تا زمانی که آنها زیر قرار گیرند و روند طبیعی نیز ادامه می یابد. اگر می خواهید از این کار جلوگیری کنید، باید float را پاک کنید.

بر روی المنت ی که می خواهید پس از float شروع به نمایش اش کنید، ویژگی clear را به همراه مقدار left برای نشان دادن پاکسازی آیتم float چپ شده، right برای پاکسازی آیتم float راست شده یا both برای پاک کردن همه float ها استفاده کنید.

.clear {
    clear: both;
}

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

برای جلوگیری از این وضعیت ما نیاز داریم بعضی از چیز ها را درون باکس پاک کنیم. ما می توانستیم یک المنت خالی را اضافه کنیم و آن را برای پاکسازی همه تنظیم کنیم. این کار div های سند ما را چسبیده می کرد که ایده آل نیست و ممکن است دیگر صفحه شما با CMS تولید نشود. پس به جای آن، از متد پاکسازی float ها که با clear fix hack نیز شناخته می شود استفاده می کنیم. این متد با اضافه کردن CSS Generated Content و تنظیم کردن آن برای پاکسازی هر دو "both" کار می کند.

به کد های کوچک زیر توجه کنید.

کد زیر مربوط به HTML است:

<div class="container">

  <div class="item"></div>
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra.</p>

</div>

کد زیر مربوط به CSS است:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
}

.item {
  width: 100px;
  height: 100px;
  float: left;
  margin: 0 20px 20px 0;
  background-color: rgba(111,41,97,.3);
}

.container::after {
  content: "";
  display: table;
  clear: both;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

Block Formatting Context

راه دیگری برای پاکسازی float ها، داخل باکسی است که (Block Formatting Context (BFC را در container فرا می خواند. Block Formatting Context هر چیزی را درون خود دارد، که شامل آیتم های float شده ای می باشد که نمی توانند از پایین باکس استفاده نمایند. چند راه برای force کردن BFC وجود دارند، معمولی ترین راه هنگامی است که float ها را پاکسازی می کنید و آن را برای ویژگی overflow با مقداری به غیر از مقدار پیش فرض تنظیم می کنید.

.container {
    overflow: auto;
}

استفاده از overflow در این راه معمولی کار می کند، با این وجود، در بعضی از حالت ها شما می توانید در آیتم به clipped shadows یا اسکرول بار های ناخواسته پایان دهید. همچنین می تواند کمی در stylesheet تان گیج کننده باشد: آیا شما overflow را بخاطر این که اسکرول بار ها را می خواستید یا برای افزایش توانایی پاکسازی تنظیم کردید؟

برای ساخت intent پاک کننده و جلوگیری از ساخته شدن BFC که موجب افکت های ناخواسته می شود، شما می توانید از flow-root به عنوان مقدار ویژگی display استفاده کنید. تنها چیزی که وجود دارد این است که display: flow-root یک BFC می سازد پس پاکسازی float های شما بدون هیچ مشکلی انجام می شود.

.container {
    display: flow-root;
}

Legacy استفاده شده در Float ها

تا رسیدن به متد های جدید لایه float که برای ساخت ستون لایه استفاده می شوند، این تکنیک با دادن مجموعه ای از آیتم ها به عرض و تنظیم کردن آنها به float در کنار یکدیگر کار می کند. مدیریت دقیق در درصد سایز در باکس های float شده می تواند افکت یک گرید را ایجاد نماید.

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

منابع و مطالعه بیشتر در مورد float ها و پاکسازی آنها

Positioning

برای حذف یک المنت از روند طبیعی (normal flow) یا تغییر آن دور مکانش در normal flow، شما می توانید از ویژگی position در CSS استفاده کنید. زمانی که در روند طبیعی، المنت ها دارای یک position در static دارند. آیتم ها یکی پس از دیگری در ابعاد بلوک نمایش داده می شوند و اگر نیز شما صفحه را اسکرول کنید آنها هم با آن اسکرول می شوند.

هنگام عوض کردن مقدار position معمولا شما باید از مقادیر offset برای حرکت باکس دور  reference point خاص استفاده نمایید. reference point استفاده شده بستگی به مقدار position ای دارد که شما در حال استفاده از آن هستید.

Relative Position

اگر یک آیتم  position: relative دارد پس reference point آن را به طور نرمال در روند طبیعی می گذارد. شما می توانید بعدا از مقادیر offset برای ویژگی های top, left, bottom و right برای حرکت دادن باکس از جایی که به طور نرمال نمایش داده می شود استفاده کنید.

.item {
    position: relative;
    bottom: 50px;
}

توجه داشته باشید که آیتم ها در صفحه به position های جدید در المنت های تان پاسخی نمی دهند. مکان آن در روند طبیعی قرار گرفته است، بنابراین شما باید هر گونه روی هم قرار گرفتگی را مدیریت کنید.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  
  <div class="item"></div>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: rgba(111,41,97,.3);
  position: relative;
  bottom: 50px;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

Absolute Positioning

تنظیم  position: absolute  برای یک آیتم باعث حذف کامل آن از روند طبیعی می شود. فضایی هم که برای آن باقی مانده حذف خواهد شد. سپس آیتم نسبت به بلوک حاوی آن قرار می گیرد، مگر آنکه در داخل یک المنت دیگر قرار گیرد، به viewport تبدیل می شود.

بنابراین، اولین چیزی که با تنظیم کردن position: absolute در آیتم اتفاق می افتد این است که معمولا چسبیدن به بالا و چپ در viewport پایان می یابد. بعد از آن شما می توانید مقادیر offset را برای ویژگی های topleftbottom و right برای حرکت باکس به موقعیتی که دوست دارید استفاده کنید.

.item {
    position: absolute;
    top: 20px;
    right: 20px;
}

غالبا شما نمی خواهید باکس مطابق با viewport قرار بگیرد، اما در رابطه با یک المنت containing آن در داخل است. در این صورت شما باید المنت containing را position ای به غیر از مقدار پیش فرض استاتیک بدهید.

با تنظیم کردن position: relative آیتم از روند طبیعی حذف نمی شود، این انتخاب معمولی است. offset هایی که دوست دارید از position: relative تنظیم شوند و بعد از آن offset به صورت مطلق در بلوک از مرز های المنت موقعیت دهی شود را به المنت والد تخصیص بدهید.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  
  <div class="item"></div>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: rgba(111,41,97,.3);
  position: absolute;
  top: 20px;
  left: 20px;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

Fixed Position

چیزی که با position: fixed انجام خواهد شد این است که در اغلب موارد نسبت به viewport قرار می گیرد و از سند در جریان حذف می شود پس فضایی نیز برایش رزرو نمی شود. هنگامی که صفحه اسکرول یا پیمایش می شود، المنت fixed شده در جای خود نسبت به viewport باقی می ماند و بقیه محتوا هم در روند طبیعی شان به طور معمول باقی خواهند ماند.

.item {
    position: fixed;
    top: 20px;
    left: 100px;
}

این قابلیت زمانی که می خواهید یک نوار ناوبری (navigation) ثابت در صفحه داشته باشید می تواند مفید و بسیار کارآمد باشد. زمانی که از این قابلیت استفاده می کنید توجه داشته باشید که محتوا قبل از آیتم fixed شده به پایان نرسد و کاربر بتواند آن را بخواند.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  
  <div class="item"></div>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
  
   <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
  
   <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: rgba(111,41,97,.3);
  position: fixed;
  top: 20px;
  left: 20px;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

برای دادن موقعیت fixed به یک آیتم که به چیزی به غیر از viewport نسب داده شود، باید المنت containing ای با یکی از ویژگی های transformperspective, یا filter داشته باشید که مقدارش به غیر از مقدار پیش فرض none تنظیم شده باشد. در این مورد، المنتی که به بلوک containing تبدیل شده و offset های شما به بلوک می گویند که به viewport ترجیح داده شده است.

Sticky Position

تنظیم کردن position: sticky در یک المنت سبب می شود که المنت با سند حرکت کند، همانطور که در روند طبیعی جریان دارد، با این وجود، هنگامی که به بعضی از نقاط خاص نسبت به viewport می رسد (با استفاده از offset های معمولی) "چسبنده" می شود و مانند position: fixed عمل می کند. این مقدار کمی جدید است و مرورگر های کمتری نسبت به بقیه متد ها از آن پشتیبانی می کنند، با این وجود، اگر در مرورگر مد نظر شما این قابلیت پشتیبانی نمی شود می توانید از یک افزونه بدون مشکل استفاده کنید.

.item {
    position: sticky;
    top: 0;
}

کد مثال پایین یک افکت navigation بسیار محبوب است که در ابتدا درون صفحه می باشد و با اسکرول به بالا و در بالا متوقف می شود.

به کد های زیر توجه کنید:

کد زیر مربوط HTML می باشد:

<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  
  <div class="item"></div>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
  
   <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
  
   <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

کد زیر مربوط CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  position: relative;
}

.item {
  width: 100px;
  height: 30px;
  background-color: rgba(111,41,97,.3);
  position: sticky;
  top: 0;
  width: 100%;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

منابع و مطالعه بیشتر در مورد Positioning

  • Positioning,” منطقه آموزش MDN ,  مستندات وب MDN , موزیلا
  • position: sticky;,” کریس کوییر , CSS-Tricks
  • CSS position:sticky,” اطلاعاتی درباره پشتیبانی مرورگر ها از این قابلیت , caniuse

Flex Layout

(Flexible Box Layout (Flexbox یک روش برای طراحی لایه های یک بعدی (one-dimensional) می باشد. یک بعدی یعنی شما دوست دارید  محتوا تان را در ردیف (row) یا ستون (column) تنظیم کنید.برای گذاشتن المنت تان در لایه flex، شما باید از ویژگی display با مقدار flex استفاده نمایید.

به کد زیر توجه کنید:

.container {
    display: flex;
}

فرزند مستقیم آن المنت به آیتم های flex تبدیل می شوند، آنها به عنوان ردیف تنظیم و در جهت inline در لبه شروع تراز می شوند.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML است:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

کد زیر مربوط به CSS است:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

محور ها در Flexbox

در مثال بالا، من آیتم های بیرونی را که در لبه شروع در جهت inline در ردیف هایمان تراز شده بودند شرح دادم، به جای آن، آنها را برای تراز شدن به سمت چپ شرح می دهم. آیتم های ما در ردیف تنظیم شده اند چون مقدار پیش فرض ویژگی flex-direction بر روی row در جهت inline تنظیم شده است، جهت یا direction همراه جمله ای است که اجرا می شود. فرض کنید ما در حال کار با زبان انگلیسی هستیم، مشخص است که یک زبان چپ به راست است، شروع ردیف در چپ است پس آیتم های ما نیز از آنجا شروع می شوند. مقدار flex-direction محور اصلی (main axis) را در Flexbox نیز تعریف می کند.

محور رو به رو (cross axis)، رو به روی محور اصلی در زاویه راست اجرا می شود. اگر flex-direction شما بر روی row تنظیم شده باشد و آیتم هایتان در جهت inline نمایش داده شوند، محور رو به روی شما در جهت بلوک اجرا می شود. اگر flex-direction بر روی column تنظیم شده باشد پس آیتم ها در جهت بلوک و بعد همراه ردیف می شوند و اجرا خواهند شد.

اگر به این فکر افتاده اید که از محور ها در هنگام کار با Flexbox استفاده کنید پس مطمئن باشید خیلی چیز ها را برایتان آسان می سازد.

Direction و Order

Flexbox به شما تونایی می دهد تا با استفاده flex-direction با مقدار row-reverse یا column-reverse جهت آیتم هایتان را در محور اصلی تغییر دهید.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

شما همچنین می توانید با ویژگی order ترتیب آیتم های flex را تغییر دهید. با این وجود، شما باید هنگام کار کردن بسیار مراقب باشید چون هر کاربری که از کیبورد برای navigation استفاده بکند یا اگر کاربری صفحه لمسی داشته باشد در این مورد مشکلاتی پیش می آیند. بخش زیر را در visual و document برای اطلاعات بیشتر مشاهده نمایید.

ویژگی های Flex

ویژگی های Flex به شما کمک می کنند که چگونه بر روی آیتم های flex با محور اصلی کنترل داشته باشید. سه ویژگی عبارت اند از:

  • flex-grow
  • flex-shrink
  • flex-basis

اینها معمولا در فرم کوتاه شده خود در ویژگی flex استفاده می شوند، اولین مقدار مربوط به flex-grow، دومین مقدار برای flex-shrink و سومین مقدار نیز برای flex-third می باشد.

.item {
    flex: 1 1 200px;
}

مقدار flex-basis سایز آیتم را قبل از هر بزرگ شدن و کوچک شدنی می دهد. در مثال بالا، آن سایز 200 پیکسل می باشد، پس ما خوسته ایم که هر آیتم 200 پیکسل  فضا بگیرد. بعید است که container ما به صورت کامل به 200 پیکسل تقسیم شده باشد پس قطعا یا مقدار فضایی باقی می ماند یا مقدار فضای کافی برای هر آیتمی که 200 پیکسل را گرفته باقی نمی ماند. اینجا است که ویژگی های flex-grow و flex-shrink به کمک ما می آیند و به ما اجازه می دهند تا اتفاقی را مانند فضای کافی کم یا فضای زیاد را کنترل کنیم.

اگر flex-grow بر روی هر مقدار مثبتی تنظیم شده باشد، پس هر آیتم اجازه دارد که برای خود مقدار فضایی که لازم دارد را بزرگ شود. بنابراین، در مثال بالای ما، بعد از دادن 200 پیکسل به هر آیتم، هر فضای اضافه میان آیتم ها پخش می شود.

اگر flex-shrink بر روی هر مقدار مثبتی تنظیم شده باشد، پس آیتم می تواند در وضعیتی که سرریز شدن در حال اتفاق است کوچک شود. اگر در container ما در مثال بالا فضای کافی موجود نباشد، هر آیتم می تواند تا وقتی که فضا ها در container به مقدار مناسب نرسد به اندازه برابر کوچک شود.

flex-grow و flex-shrink می توانند هر مقدار مثبتی را بگیرند. آیتمی بهترین مقدار flex-grow را دارد که فضای بیشتری را به صورت نسبی هنگام بزرگ شدن می دهد و آیتمی بهترین مقدار flex-shrink را دارد که هنگام کوچک شدن بیشتر حذف می شود.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML است:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

کد زیر مربوط به CSS است:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  flex: 1 1 0;
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.container :first-child {
  flex: 2 1 0; 
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

فهم راه ویژگی های flex که چگونه کار می کنند کلیدی برای فهم Flexbox است و منابع لیست شده در زیر همه اطلاعات مورد نیاز را به شما می دهند. با این وجود، می گویم زمانی که دسته ای از چیز های را دارید که می خواهید آنها را در container یک بعدی تان stretch و squish کنید استفاده از Flexbox را پیشنهاد می کنم. اگر شما در تلاش هستید تا چیز های تان را در ردیف و ستون مرتب کنید، شما به یک Grid نیاز پیدا خواهید کرد و در این مورد شاید Flexbox گزینه خوبی برای کار شما نباشد.

منابع و مطالعه بیشتر در مورد Flex Layout

Grid Layout

CSS Grid Layout برای لایه بندی دو بعدی (two-dimensional) طراحی شده است. دو بعدی یعنی اینکه شما بخواهید محتوا تان را در خارج از در ردیف ها و ستون ها تنظیم کنید. همانند Flexbox، لایه گرید هم مقداری از display است پس برای شروع کار با گرید باید از display: grid در container تان استفاده کنید و بعد از آن کمی ستون و/یا ردیف ها با استفاده از ویژگی های grid-template-columns و grid-template-rows تنظیم نمایید.

کد زیر را مشاهده کنید:

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px;
}

کد CSS بالا یک گرید با سایز ثابت و فیکس و همچنین با track ستون و ردیف های کاملا ثابت ایجاد می کند. شاید این چیزی نباشد که شما در وب می خواهید و گرید شما به خوبی پوشش داده شده باشد. مقدار پیش فرض برای هر track روی auto می باشد که معمولا می تواند با جمله "فضای بزرگ برای محتوا" از آن یا کرد. اگر ما هیچ track ردیفی ایجاد نکرده باشیم، ردیف ها برای محتوا های اضافه شده ساخته می شوند و این روی سایز auto تنظیم خواهد بود. یک الگوی سریع و معمول این است که track های ستون را مشخص کنیم ولی گرید اجاه دارد تا ردیف ها را طوری که نیاز است بسازد.

در صورتیکه شما می توانید از هر واحد و طولی برای تنظیم track ستون و ردیف هایتان استفاده نمایید، همچنین می توانید از واحد جدید fr نیز استفاده نمایید، واحدی که برای لایه گرید ساخته شده است. واحد fr یک واحد flex هست و فضای موجود در گرید container را برای پخش کردن مشخص می کند.

گرید می تواند فضا را برای شما توزیع دهد; شما نیازی ندارید تا درصد را برای اطمینان از ثبات چیز هایتان در container محاسبه کنید. در مثال پایین، ما یک ستون را با استفاده از واحد fr ساخته ایم که به track ها اجازه می دهد به طور خودکار ساخته شوند. ما همچنین برای فضای خارج track هایمان از grid-gap استفاده کرده ایم (بخش ترازبندی باکس را برای اطلاعات بیشتر در مورد gap ها و لایه گرید ببینید).

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5<br>has more content.</div>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

همانند flexbox و  flex-grow یا flex-shrink، واحد fr نیز با به اشتراک گذاشتن فضای موجود در ارتباط است. بالاترین مقدار fr برای یک track بدین معناست که به صورت نسبی فضای موجود بیشتری می گیرد. شما همچنین می توانید fr را با طول absolute مخلوط کنید. فضای مورد نیاز برای طول ها قبل از کار کردن واحد fr از فضای موجود حذف می شود.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML است:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5<br>has more content.</div>
</div>

کد زیر مربوط به CSS است:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 2fr 100px;
  grid-gap: 20px;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

ترمینولوژی Grid

گرید همیشه 2 محور دارد: محور inline که در جهت کلماتی که در صفحه تنظیم شده اند اجرا می شود و محور بلوک (Block) که در جهت بلوک های تنظیم شده قرار می گیرد.

Grid Container المنتی است که شما باید display: grid را فعال کنید. بعد شما خطوط گرید را دارید، track های ستون و ردیف ساخته شده اند که شما باید زمان استفاده از grid-template-columns و grid-template-rows آن را مشخص کرده باشید. کوچک ترین واحد در گرید (بین چهار خط متقاطع) با نام سلول گرید (Grid Cell) شناخته شده است، زمانی که مجموعه ای از سلول های گرید یک مستطیل کامل را بسازند آن را با نام Grid Area صدا می زنند.

به تصاویر زیر توجه کنید، توضیحات هر تصویر در زیر آن نوشته شده است.

خطوط گرید بین هر track در گرید اجرا می شوند

track های گرید بین هر دو خط هستند

Grid cell ها کوچک ترین واحد در گرید هستند، Grid area یک یا چند سلول (cell) هستند که در کنار هم یک مستطیل را ایجاد می کنند.

Grid Auto-Placement

به محض ایجاد کردن یک گرید، کودکان مستقیم در گرید cintainer شما یکی در هر سلول گرید به خارج کردن خودشان شروع می کنند. آنها این کار را با توجه به قوانین grid auto-placement انجام می دهند. این قوانین برای اطمینان از اینکه هر آیتم در یک سلول خالی جای گذاری شده است می باشد تا از آیتم های روی هم افتاده جلوگیری شود.

هر کودک مستقیم که شما به آن موقعیت نداده باشید مطابق با قوانین auto-placement جای گذاری می شود. در مثال زیر، من سومین آیتم ها را در پوشش track های دو ردیفی (two-row) قرار داده ام، که هنوز با auto-placed در خط شروع وجود دارند.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.container > div:nth-child(3n+1) {
  grid-row-end: span 2;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

BASIC LINE-BASED POSITIONING

ساده ترین راه برای قرار دادن آیتم ها در Grid با line-based positioning می باشد، به این ترتیب که قاعده ی آیتم ها را از یک خط از گرید به دیگری متمایز می کند. برای مثال، اگر یک گرید با سه track ستون و دو track ردیف داشته باشم، می توانم آیتم را از ستون 1 به ستون 3 و ردیف 1 به ردیف 3 ببرم. سپس چهار سلول گرید را دربر می گیرد و دو track ستون و دو ستون ردیف را می پوشاند.

.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

این ویژگی ها می توانند با شکل کوتاه شده آنها grid-column و grid-row نمایش داده شوند. مقدار اولی start و دومی end می باشد.

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

آیتم های گرید می توانند سلول هایی را اشغال کنند و طراحی ایجاد شده با روی هم افتادگی محتوا را فعال کنند. آیتم ها با روشی معمول که محتوای پشته در وب را جمع می کند، با مواردی که پایین تر از منبع موجود در بالای سایر آیتم ها قرار می گیرد، جمع می شود. با این وجود، شما می توانید برای کنترل این کار از z-index استفاده کنید.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>

</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.container > div {
  padding: 10px;
}

.one {
  grid-column: 1 / 4;
  grid-row: 1;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.two {
  grid-column: 1 / 3;
  grid-row: 2;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.three {
  grid-column: 2 / 4;
  grid-row: 2 / 5;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}

.four {
  grid-column: 1;
  grid-row: 4 ;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}

.five {
  grid-column: 3 ;
  grid-row: 4 / 5;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

موقعیت دهی با Named Areas

شما همچنین می توانید آیتم ها را در گرید تان با استفاده از Named Areas موقعیت دهی کنید. برای استفاده از این متد شما به هر آیتم یک نام باید بدهید و بعد از آن باید لایه را با ویژگی grid-template-areas توصیف کنید.

.item1 {
    grid-area: a;
}

.item2 {
    grid-area: b;
}

.item3 {
    grid-area: c;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
     "a a b b"
     "a a c c";
}

چند قانون ساده وجود دارد که هنگام استفاده از این متد باید به یاد داشته باشید. اگر شما می خواهید یک آیتم به طور متعدد گسترش یابد باید نام آن را تکرار کنید. areas نیاز دارد تا یک شکل کامل مستطیل شود، L شکل یا تتریس مجاز نیستند! گرید باید کامل باشد — هر سلول باید پر شود. اگر می خواهید فضای سفید را نداشته باشید باید آن سلول را با . پر کنید. برای مثال، در CSS زیر من گوشه راست خالی پایین را ترک کرده ام.

به کد زیر توجه کنید:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
     "a a b b"
     "a a c .";
}

این یک راه خوب برای کار برای کسانی است که دنبال CSS هستند که می توانند به صورت کامل ببینند لایه چگونه کار می کند.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>

</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 20px;
  grid-template-areas: 
    "a a a"
    "b c c"
    ". . d"
    "e e d"
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.one {
  grid-area: a;
}

.two {
  grid-area: b;
}

.three {
  grid-area: c;
}

.four {
  grid-area: d;
}

.five {
  grid-area: e;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

منابع و مطالعه بیشتر در مورد Grid Layout

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

  • CSS Grid Layout,” تکنولوژی وب برای توسعه دهندگان, مستندات وب MDN, موزیلا
  • Grid by Example,” هر چیزی که برای یادگیری لایه گرید نیاز دارید, ریچل اندرو
  • Grid Garden,” یک بازی تعاملی سرگرم کننده برای تست و بهبود مهارت هایتان در CSS
  • Layout Land,” جین سیمونز, یوتیوب

من همچنین تعدادی از مقالات ریچل اندرو در Smashing Magazine پیدا کرده ام که می تواند به شما کمک کند تا به مفاهیم مختلف گرید بپردازید.

ترتیب سند و ویژوال

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

مرورگر ها سورس سند را برای هر استفاده non-visual ای در سند را دنبال می کنند. بنابراین، خوانندگان صفحه ترتیب سند را نخواهند دید و هر کسی که از کیبورد برای پیمایش استفاده کند برگ از طریق سند در ترتیب سورس قرار میگیرد و نه ترتیب نمایشگر. اکثر کاربران خواننده نابینا نیستند پس ممکن است از screen reader استفاده کنند و توانایی این را پیدا کنند که بدانند کجای سند وجود دارند. برای هر دو این موارد، یک نمایشگر که در مقایسه با منبع منحرف می شود، در واقع می تواند وضعیت بسیار گیج کننده ای را ایجاد کند.

زمانی که المنت ها را حرکت می دهید بسیار آگاه باشید چون ترتیب آنها در سورس است. اگر شما قصد دارید آیتم ها را در CSS دوباره بچینید، حتما باید به عقب برگردید و سند تان را دوباره سازماندهی کنید؟ تست کنید تا ببیند آیا هنوز هم می توانید در اطراف سند خود تغییر ایجاد کنید و منظور ویژوال را حس نمایید.

منابع و مطالعه بیشتر در مورد ترتیب سند ویژوال

تولید باکس

هر چیزی که شما آن را در صفحه وب تان می گذارید یک باکس ایجاد می کند و هرچیزی که در این مقاله برای استفاده از CSS توصیف شد تا آن را در طراحی تان بگذارید و لایه بندی بکنید یک باکس را ایجاد می کرد، با این وجود، در بعضی از مواقع شاید شما دوست نداشته باشید که همیشه باکس ایجاد شود. در این زمان من 2 مقدار برای ویژگی display را برای تان توضیح می دهم که آنها از ایجاد باکس جلوگیری می کنند.

باکس یا محتوا را تولید نکنید (display: none)

اگر شما می خواهید المنت و همه محتوای آن المنت، شامل هر آیتم کودک، تولید نشود می توانید از display: none استفاده کنید. المنت حالا نمایش داده نمی شود و هیچ فضای رزرو شده ای برای اینکه در کجا نمایش داده شود نیست.

.item {
    display: none;
}

این المنت را تولید نکنید اما هر المنت کودک را تولید کنید (display: contents)

یک مقدار جدیدتر برای ویژگی display که می تواند مفید تر واقع گردد display: contents می باشد. اعمال display: contents برای هر المنت و باکس ای باعث می شود که آن المنت تولید نشود ولی هر المنت کودک همانند وضعیت عادی تولید شود. این مقدار زمانی که می خواهید المنت کودک به صورت غیر مستقیم بخشی از لایه flex یا گرید شود می تواند مفید باشد.

در مثال زیر، اولین آیتم flex حاوی 2 کودک تو در تو می باشد، ولی همانطور که آن روی display: contents تنظیم شده است آن باکس اجاره داده نشده است و کودکان مانند فرزند مستقیم و به آیتم های flex تبدیل شده اند. display: contents را از آن المنت حذف کنید تا ببینید لایه چگونه تغییر می کند.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div class="item">
    <div class="subitem">A</div>
    <div class="subitem">B</div>
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
}

.item {
  flex: 1 1 200px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

.subitem {
  padding: 10px;
  background-color: rgba(193,225,237,.3);
  border: 2px solid rgba(193,225,237,.5);
}

.container .item:first-child {
  display: contents;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

منابع و مطالعه بیشتر در مورد تولید باکس

Alignment

ترازبندی یا Allignment بعضی اوقات یکی از موضوعات پیچیده وب می باشد و راه های بسیار کمی برای تراز آیتم ها در باکس ها را داراست. این با ترازبندی ماژول باکس تغییر می کند که در حال حاضر شما از آن زمانی که ترازبندی را در container گرید و Flex کنترل می کنید استفاده می کنید. در آینده، روش های دیگر نیز این ویژگی تراز بندی را اجرا خواهند کرد. فهرست ویژگی های تراز بندی در مشخصات ترازبندی باکس به شرح زیر است:

  • justify-content
  • align-content
  • place-content
  • justify-items
  • align-items
  • place-items
  • justify-self
  • align-self
  • place-self
  • row-gap
  • column-gap
  • gap

به عنوان مدل های لایه آنها سیما های مختلفی دارند، ترازبندی کمی متفاوت از مدل لایه در استفاده عمل می کند. بیایید نگاهی به این بیندازیم که ترازبندی چگونه با لایه های ساده Flex و گرید کار می کند.

ویژگی های align-items و justify-items ویژگی های align-self و justify-self را تبدیل به یک گروه می کنند. این ویژگی ها آیتم را در ناحیه گرید خودشان تراز می کند.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="special">5</div>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  align-items: center;
  justify-items: start;
}

.special {
  grid-column: 2 / 4;
  align-self: end;
  justify-self: end;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

ویژگی های align-content و justify-content ترک (track) های گرید را تراز می کنند، جایی که در آن فضای بیشتری برای container گرید وجود داشته باشد برای نمایش ترک ها مطلوب تر می باشد.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  height: 300px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  align-content: space-between;
  justify-content: end;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

در Flexbox، مقدار align-items و align-self با ترازبندی محور رو به رو هستند، درصورتیکه مقادیر justify-content با فضای توزیع شده در محور اصلی می باشند.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div class="special">3</div>
  <div>4</div>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  height: 300px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.special {
  align-self: stretch;
}

.container > div {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

در محور رو به رو، شما می توانید از align-content زمانی که خطوط flex پیچیده شده اند و فضای اضافی در flex container وجود داشته باشد استفاده کنید.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  height: 300px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.container > div {
  flex: 1 1 200px;
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

بخش منابع را برای برخی از لینک های مفید که ترازبندی باکس در جزئیات متد های لایه را توضیح می دهند ببینید. واقعا ارزش دارد که وقت خود را برای درک اینکه ترازبندی ها چگونه کار می کنند بدهید، چون اینکار باعث می شود که کار با Flexbox، گرید و متد های لایه بندی بعدی را بسیار آسان تر کند.

Gap های ردیف و ستون

یک لایه ستون چندگانه دارای ویژگی column-gap است و لایه گرید تا همین اواخر دارای ویژگی های grid-column-gapgrid-row-gap, و grid-gap می باشد. اینها الان از مشخصات گرید حذف شده و به ترازبندی باکس (Box Alignment) اضافه شده است. در همین زمان، ویژگی های پیشفرض grid- به column-gaprow-gap, و gap تغییر نام داده اند. مرورگر ها ویژگی های پیشفرض را به نام های جدید تغییر نام می دهند بنابراین لازم نیست نگران باشید اگر در حال حاضر از نام های قدیمی تر پشتیبانی شده در کد تان استفاده می کنید.

تغییر نام دادن یعنی اینکه ویژگی ها می توانند همچنین به متد های دیگر لایه اعمال شوند، Flexbox داوطلب آشکار است. در حالیکه در حال حاضر مرورگری از gap ها در Flexbox پشتیبانی نمی کند، در آینده ما باید توانایی پیدا کنیم تا از column-gap و row-gap برای ساختن فضای بین آیتم های flex استفاده کنیم.

منابع و مطالعه بیشتر در مورد ترازبندی

لایه چند ستونی

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

لایه چند ستونی همچنین می تواند برای نمایش مجموعه ای از کارت ها یا محصولاتی با ارتفاعات متفاوت استفاده شود.

تنظیم کردن عرض ستون

برای تنظیم بهینه عرض ستون و گفتن به مرورگر ها تا بسیاری از ستون ها را در عرض ممکن آن نمایش دهند، از کد CSS زیر بهره ببرید: 

.container {
    column-width: 300px;
}

این کار باعث می شود تعداد زیادی ستون با 300 پیکسل ساخته شود، هر فضای باقی مانده بین ستون ها بخش می شود. بنابراین، مگر اینکه فضای شما به 300 پیکسل بدون باقی مانده تقسیم شود، احتمال دارد که ستون های شما کمی نسبت به 300 پیکسل بزرگ تر باشد.

تنظیم کردن تعداد ستون ها

به جای تنظیم کردن عرض ستون ها، می توانستید تعداد ستون ها را با استفاده از column-count تنظیم کنید. در این مورد، مرورگر فضا را برای تعداد ستون هایی که درخواست کرده اید به اشتراک می گذارد.

.container {
    column-count: 3;
}

اگر شما هر دوی column-width و column-count را اضافه کنید، بعد ویژگی column-count به عنوان حداکثر عمل می کند. در کد زیر، ستون ها تا وقتی 3 تا ستون باقی باشد اضافه می شوند، در این صورت هر فضای اضافی بین این سه ستون به اشتراک گذاشته خواهد شد، حتی اگر فضای کافی برای یک ستون اضافی وجود داشته باشد.

.container {
    column-width: 300px;
    column-count: 3;
}

Gap ها و قوانین ستون

شما نمی توانید به باکس های ستون تکی margins یا padding اضافه کنید، برای فاصله دادن به ستون از ویژگی column-gap استفاده کنید. اگر شما column-gap را مشخص نکرده باشید، مقدار پیش فرض آن روی 1em تنظیم می شود تا از برخورد آنها به یکدیگر جلوگیری شود. این یک رفتار متفاوت برای راه column-gap است که برای بقیه متد های لایه مشخص شده است، که پیش فرض آن 0 می باشد. شما می توانید از هر واحد طولی برای gap تان استفاده کنید، اگر می خواهید هیچ gap ای در همه موارد نباشد 0 را وارد کنید.

ویژگی column-rule به شما توانایی می دهد تا بین دو ستون قوانینی بگذارید. این ویژگی کوتاه شده column-rule-widthcolumn-rule-color, و column-rule-style است و در همان راه مانند border عمل می کند. توجه داشته باشید که یک قانون هیچ فضایی از خود ندارد. آن را در بالای gap می گذارد پس برای هر افزایش و کاهش فضا بین قانون و محتوا شما نیاز دارید تا column-gap را افزایش یا کاهش دهید.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML است:

<div class="container">
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

کد زیر مربوط به CSS است:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  column-width: 120px;
  column-gap: 20px;
  column-rule: 4px dotted #000;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

اجازه دادن به المنت ها برای گسترش ستون ها

شما می توانید یک المنت را در multicol container رو به روی همه ستون ها با استفاده از ویژگی column-span در آن المنت گسترش دهید.

h3 {
    column-span: all;
}

زمانی که یک column-span اتفاق می افتد، multicol container در اصل بالا تر از المنت گسترش دهنده متوقف می شود، بنابراین، فرم های محتوا در ستون ها در بالای المنت شکل می گیرند و سپس محتوای باقی مانده یک مجموعه جدید از باکس های ستون زیر المنت گسترش دهنده را ایجاد می کند.

به کد های زیر توجه کنید:

کد زیر مربوط به HTML است:

<div class="container">
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  <h2>Veggies!</h2>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p>
</div>

کد زیر مربوط به CSS است:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  column-width: 120px;
  column-gap: 20px;
  column-rule: 4px dotted #000;
}

.container h2 {
  column-span: all;
  background-color: rgba(193,225,237,.6);
  border:2px solid rgba(193,225,237,.6);
  margin: 1em 0;
  padding: .5em;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

شما می توانید فقط از  column-span: all یا column-span: none استفاده کنید این ویژگی برای گسترش قسمتی از ستون ها ممکن نیست. در زمانی که من این مقاله را می نویسم، فایرفاکس از ویژگی column-span پشتیبانی نمی کند.

منابع و مطالعه بیشتر در مورد لایه چند ستونی

Fragmentation

لایه چند ستونی یک مثال برای fragmentation است. در این مورد، محتوا در ستون ها شکسته است. با این حال، این بسیار شبیه محتوایی است که درون صفحه هنگام چاپ کردن شکسته باشد. این روند با مشخصات Fragmentation سرو کار دارد و این مشخصات حاوی ویژگی هایی برای کمک به کنترل محتوای شکسته شده می باشد.

برای مثال، اگر شما مجموعه ای از کارت ها را با استفاده از multicol لایه بندی کنید و بخواهید اطمینان حاصل کنید که آن کارت هیچ وقت شکسته نمی شود، شایسته است که بین دو ستون تقسیم انجام دهید شما می توانید از ویژگی break-inside با مقدار avoid استفاده کنید. با توجه به دلایل سازگاری مرورگر، شما همچنین باید از ویژگی  page-break-inside نیز استفاده کنید.

به کد زیر توجه کنید:

.card {
    page-break-inside: avoid;
    break-inside: avoid;
}

اگر شما می خواهید از شکسته شدن مستقیم پس از heading دوری کنید، می توانید از ویژگی break-after استفاده نمایید.

.container h2 {
    page-break-after: avoid;
    break-after: avoid;
}

این ویژگی ها می توانند هنگام ساختن stylesheet چاپ و همچنین در multicol استفاده شوند. در مثال زیر، من سه پاراگراف در multicol container آن fragment ها که در سه ستون هستند را دارم. من break-inside: avoid را به المنت p داده ام که به این معنی است که آن پاراگراف ها در هر یک از ستون ها پایان می یابند  (حتی اگر این کار باعث ناجور شدن ستون ها شود).

به کد های زیر توجه کنید:

کد زیر مربوط به HTML می باشد:

<div class="container">
  <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>
  <p>Grape silver beet  collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout</p>
  
  <p>Groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
</div>

کد زیر مربوط به CSS می باشد:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {
  width: 500px;
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  column-width: 120px;
  column-gap: 20px;
  column-rule: 4px dotted #000;
}

.container p {
  page-break-inside: avoid;
  break-inside: avoid;
}

همچنین می توانید کد بالا را به صورت آنلاین در codepen با این لینک مشاهده نمایید.

منابع و مطالعه بیشتر در مورد Fragmentation

انتخاب نوع لایه: چگونه انتخاب کنم؟ 

اکثر صفحات وب از مخلوطی از این نوع لایه ها استفاده می کنند و هر مشخصات کاملا برای چگونگی برخورد با یکدیگر تعریف می شود. برای مثال، شما ممکن است یک لایه گرید داشته باشید که آیتم های گرید نیز در container های Flex قرار دارند. بعضی از آن container های Flex ممکن است به یک بلوک حاوی موقعیت دهی برای آیتم یا یک عکس float شده درون آن داشته باشند. مشخصات با انتظاری که ما می خواهیم مدل های لایه مطابق با بهترین چیز برای محتوایی که ما می خواهیم لایه بندی کنیم مخلوط بشوند، نوشته شده اند. در این راهنما، من سعی کردم تا بر روی یک شیوه اساسی که رفتار هر نوع لایه را انجام می دهد، خلاصه ای داشته باشم تا به شما کمک کنم بتوانید بهترین راه برای رسیدن به یک اثر خاص را داشته باشید.

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

این مقاله پایان یافت، یک فنجان قهوه نوش جان کنید تا خستگی از وجودتان پاک شود :)


کلیدواژه: CSS آموزش اصول

منابع: www.smashingmagazine.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.