.box {
display: flex;
}.box {
display: flex;
flex-wrap: wrap;
}DEFENSIVE CSS
امیرعطا فرجی
علیرضا بینش
REMEMBER TO WRAP YOUR FLEX.
>Ata! DEFENSIVE CSSهر روزه از flex برای پیاده‌سازی انواع چیدمان‌ها استفاده می‌کنیم. اما گاهی اوقات بر اساس نیازهای زمان حال چیدمان را طراحی می‌کنیم و فکر آینده را نمی‌کنیم. در flex اگر تعداد فرزندها زیاد بشود ممکن است چیدمانمان به هم بریزد. با کد ساده flex-wrap: wrap; می‌توانیم این مشکل را حل کنیم.
PREVENT IMAGE DISTORTION
>Ata! DEFENSIVE CSSعکس‌ها از مهم‌ترین المان‌های هر وب‌سایتی هستند. اما ما کنترلی بر روی همه عکس‌های وب‌سایت و Aspect Ratio آن‌ها نداریم چون ممکن است از طرف کاربر آپلود شده باشند یا Back-end ما عکس‌هایی متفاوت نسبت به آنچه در ذهن داشتیم برایمان بفرستد. راحت‌ترین و بهترین کار قرار دادن object-fit: cover; بر عکس مربوطه است.
.img {
// emptiness
}
.img {
object-fit: cover;
max-width: 100%;
}
DON'T
LET TEXT
WRAP OR OVERFL...
>Ata!
DEFENSIVE CSS
در دنیای ایده‌آل، متن‌ها همگی به اندازه مناسبی هستند و همگی در المانی که تعبیه شده‌اند به خوبی جای می‌گیرند و از آن بیرون نمی‌زنند. اما در دنیای واقعی، ما باید آماده هر نوع متن با هر اندازه‌ای باشیم. برای این بهتر است تا حدی که المان پدر اجازه می‌دهد تا متن بدون آن که بشکند یا بیرون از آن قرار بگیرد، متن را نشان بدهیم و بقیه آن را سه نقطه قرار بدهیم که با دستور text-overflow: ellipsis; قابل دستیابی می‌باشد.
.text {
// emptiness
}امیرعطا فرجی
علیرضا بینش
شرکت کداستار (زیر مجموعه مهیمن)
پارسا اروانه
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}امیرعطا فرجی
علیرضا بینش
شرکت کداستار (زیر مجموعه مهیمن)
پارسا اروانه
.text {
// emptiness;
}امیرعطا فرجی
علیرضا بینش
شرکتکاستار(زیرمجموعهمهیمن)
پارسا اروانه
.text {
overflow-wrap: break-word;
min-width: 0;
}امیرعطا فرجی
علیرضا بینش
شرکتکاستار(زیرمجموعهمهیمن)
پارسا اروانه
SET BACKGROUND COLORS FOR IMAGES
>Ata! DEFENSIVE CSSبعضی وقت‌ها ممکن است نوشته‌ای را روی عکس قرار بدهیم. این کار مشکلی ندارد ولی اگر عکس load نشود و رنگ نوشته با رنگ پس‌زمینه نزدیک باشد و یا حتی هم‌رنگ باشد، آن موقع متن را به سختی می‌توان خواند. می‌توانیم با کد ساده background-color: white; این مشکل را حل کنیم.
.img {
// emptiness
}
ماشین سیاه
ماشین سیاه
.img {
background-color: var(--gradient-white, #fff);
}
ماشین سیاه
INPUT ZOOM ON SAFARI
>Ata! DEFENSIVE CSS
مشکلی در مرورگر Safari گوشی‌ها وجود دارد و آن هم این مورد است که وقتی بر inputای می‌زنیم تا اطلاعاتمان رو وارد کنیم، صفحه زوم میشه تا آن input در مرکز توجه کاربر باشد. مشکل از جایی شروع می‌شود که نمی‌توانیم به عقب زوم کنیم. با اعمال سایز فونت ثابت
font-size: 16px;
این مشکل را می‌توانیم حل کنیم.
.input {
// emptiness
}.input {
font-size: 16px;
}HOVER ON MOBILE DEVICES
>Ata! DEFENSIVE CSSوقتی برای حالت hover استایل‌هایی را تعریف می‌کنیم، مخاطبمان از این کار کسانی هستند که از mouse یا trackpad استفاده می‌کنند. با موبایل هم حالت hover را با نیمه لمس کردن می‌شود فعال کرد اما نه تنها این فعال کردن خوب نیست بلکه می‌تواند به کاربر تجربه بدی بدهد. ما می‌توانیم با @media (hover: hover){ // code } این مشکل را برطرف کنیم.
@media (hover: hover) {
.box::hover { // code }
}HIDDEN SCROLLBARS
>Alireza DEFENSIVE CSSبرای بعضی آیتم‌ها که محتوای طولانی دارند بهتر است که scrollbar قرار بدهیم. اما ممکن است متن ما متغیر باشد، و همیشه scrollbar به کارمان نیاید و در این حالت scrollbar نباید نشان داده بشود. اگر از دستور overflow-y: auto; استفاده کنیم، فقط در صورت نیاز scrollbar نشان داده می‌شود.
.box {
overflow-y: scroll;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit.
.box {
overflow-y: auto;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit.
STICKY GRIDS
>Alireza DEFENSIVE CSS
ممکن است وقتی کل چینش سایت را با grid انجام داده‌اید، نیاز شده که قسمتی را sticky کنید، مثل منوی کناری. در این حالت خواهید دید که آن المان تمام ارتفاع کلی grid را می‌گیرد.
در این حالت باید با
align-self: start;
آن المان را از حالت پیش فرض stretch در بیاورید و به start تغییر بدهید.
.aside {
position: sticky;
}- Home
- Blog
- About
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, maxime labore dolores magni voluptates a obcaecati voluptatem ab necessitatibus doloremque quas! Vero ut amet delectus consectetur minus voluptas reiciendis cum nisi eum? Consequuntur minima temporibus ab dolore culpa pariatur itaque nesciunt tenetur unde cumque rerum aliquam id ullam, dolorem corrupti deserunt. Facilis autem veniam dicta sit eius deleniti necessitatibus at esse nulla id saepe accusantium eveniet illum exercitationem fugiat asperiores, perferendis iure repellendus? Nostrum animi harum dolorem molestiae laboriosam qui autem perferendis, nisi sed odio ratione. Minima at natus in sapiente reiciendis, veniam accusamus voluptas consectetur deleniti, voluptatum possimus ratione?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam est assumenda modi aspernatur obcaecati reiciendis error dolores, eum quasi ea.
.aside {
position: sticky;
top: 1rem;
align-self: start;
}- Home
- Blog
- About
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, maxime labore dolores magni voluptates a obcaecati voluptatem ab necessitatibus doloremque quas! Vero ut amet delectus consectetur minus voluptas reiciendis cum nisi eum? Consequuntur minima temporibus ab dolore culpa pariatur itaque nesciunt tenetur unde cumque rerum aliquam id ullam, dolorem corrupti deserunt. Facilis autem veniam dicta sit eius deleniti necessitatibus at esse nulla id saepe accusantium eveniet illum exercitationem fugiat asperiores, perferendis iure repellendus? Nostrum animi harum dolorem molestiae laboriosam qui autem perferendis, nisi sed odio ratione. Minima at natus in sapiente reiciendis, veniam accusamus voluptas consectetur deleniti, voluptatum possimus ratione?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam est assumenda modi aspernatur obcaecati reiciendis error dolores, eum quasi ea.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis eveniet explicabo odio ipsam reprehenderit officia corporis mollitia, omnis incidunt et rerum culpa molestiae perferendis expedita assumenda! Voluptatum molestiae accusamus ad laudantium beatae quo quas delectus explicabo vitae nobis ipsam similique facere officiis omnis rem cupiditate consequuntur quasi ipsum possimus impedit doloremque, necessitatibus error commodi? Quisquam aspernatur vero saepe dicta. Deleniti fuga quam ut alias accusamus quibusdam at culpa ex, ad, quaerat exercitationem nihil vero, iste optio nam animi. Expedita, veniam? Reiciendis accusantium consequatur accusamus illo dolor dolores odit alias quisquam dicta quas dolorum esse deleniti vel recusandae, cum eum nobis, error quo? Modi rem officiis architecto, ratione voluptates soluta veritatis excepturi libero cupiditate porro, dolores unde, id vitae minus! Hic, et reprehenderit omnis quas dolores sint similique doloribus eveniet velit cupiditate magnam necessitatibus enim maxime debitis odio nemo alias. Iusto non nobis consectetur consequuntur, ratione ut. Perferendis recusandae laboriosam blanditiis?
WHY MY ::WEBKIT AND :MOZ DOESN'T WORK?
>Alireza DEFENSIVE CSS
بعضی وقت‌ها از vendorهایی مثل webkit یا moz استفاده می‌کنیم. در این حالت ممکن است چند vendor را با هم انتخاب کنیم تا استایل مشابه را به آن‌ها اعمال کنیم. اما این روش کار نمی‌کند و ممکن است اصلا بلافاصله متوجه نشوید و ساعت‌ها درگیر این موضوع بشوید. راه درست این است که جدا انتخابشان کنیم.
::webkit {} :moz {}
input::-webkit-input-placeholder,
input:-moz-placeholder {
color: #222;
}input::-webkit-input-placeholder {
color: #222;
}input:-moz-placeholder {
color: #222;
}MIND YOUR SCROLLBAR
>Alireza DEFENSIVE CSS
ممکن است صفحه‌ای را با دقت زیادی طراحی کرده باشید ولی یادتان رفته باشد که scrollbarها هم فضا اشغال می‌کنند و موقعی که محتوا کمی زیاد شد و scrollbarها نشان داده شدند، چیدمان صفحه‌تان به هم خورده باشد. برای جلوگیری از این مشکل، کد
scrollbar-gutter: stable;
رو به المان مد نظرتون اضافه کنید تا برای scrollbar فضا رزرو کند.
.element {
// emptiness
}Lorem ipsum dolor sitame consectetur adipisicing elit. Impedit facere fugit at rem! Facilis in distinctio nisi maiores harum recusandae unde esse repellat optio officia, et necessitatibus nam dolore. Distinctio similique nulla, quidem minus culpa debitis provident labore ipsam, explicabo exercitationem itaque.
Lorem ipsum dolor sitame consectetur adipisicing elit. Impedit facere!
.element {
scrollbar-gutter: stable;
}Lorem ipsum dolor sitame consectetur adipisicing elit. Impedit facere fugit at rem! Facilis in distinctio nisi maiores harum recusandae unde esse repellat optio officia, et necessitatibus nam dolore. Distinctio similique nulla, quidem minus culpa debitis provident labore ipsam, explicabo exercitationem itaque.
Lorem ipsum dolor sitame consectetur adipisicing elit. Impedit facere!
AUTO-FILL
vs.
AUTO-FIT
>Alireza
DEFENSIVE CSS
ممکن است در حین ایجاد grid بین دو کلیدواژه auto-fill و auto-fit بمانیم و در آخر شانسی یکی را انتخاب کنیم. ممکن است بعد از چند وقت، چیدمان صفحه‌مان یک سری رفتارهایی از خود نشان بدهد که ندانیم از کجا ناشی می‌شوند. مثل المان‌هایی با عرض خیلی زیاد که می‌تواند نتیجه انتخاب نادرست ما باشد. به طور کلی اگر از
repeat(auto-fill, minmax(250px, 1fr));
استفاده کنیم کمتر چنین مشکلاتی پیش می‌آید.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
}SCROLL!
DON'T SCROLL!
>Alireza
DEFENSIVE CSS
ممکن است شما هم در سایتی صفحه modalای یا inputای که متن و محتوای طولانی‌ای دارد و قابل scrollاست را می‌خوانید که scroll می‌کنید و به آخر می‌رسید و بعد آن صفحه اصلی شروع به scroll کردن می‌کند. این UX بدی می‌باشد و می‌توانیم با کد
overscroll-behavior-y: contain;
این مشکل را برطرف کنیم.
.modal {
// emptiness;
}
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae nihil doloribus ratione non, voluptatem quos veritatis cum, praesentium illo unde fugiat officiis vitae nisi omnis, odit excepturi corrupti quasi iste minima ullam fuga eos quidem ex molestias! Dolore, temporibus illum assumenda aliquam, laudantium architecto reiciendis nesciunt quia expedita deserunt veniam. Id unde soluta tempore commodi molestiae mollitia inventore culpa quod in. Ipsa, esse, veniam dolorum placeat incidunt odio ex nam tempore, temporibus totam id explicabo fuga sunt sapiente hic veritatis. Voluptates ipsa dolores ullam perspiciatis nemo nesciunt ipsum est assumenda eius neque numquam voluptas ut natus, impedit illo quaerat maxime cum perferendis recusandae aut optio dolore fuga. Inventore doloremque animi voluptatibus itaque, tenetur ex sunt libero ducimus molestias voluptate cum. Id, tempore quos impedit nesciunt voluptate magni quasi dolore cum et culpa, ipsum in repellendus soluta quibusdam dolores illum. Dignissimos dolore est, sint earum repellendus explicabo rem nisi facilis dolor.
Odit sequi accusamus deleniti! Ab sit tenetur iusto? Quibusdam eligendi sed pariatur sapiente iure. Facilis iste maxime harum laboriosam, explicabo magni! Quasi iste pariatur, porro fugiat animi harum, nemo illum sint repellendus quidem beatae sequi. A, magnam alias.
Odit sequi accusamus deleniti! Ab sit tenetur iusto? Quibusdam eligendi sed pariatur sapiente iure. Facilis iste maxime harum laboriosam, explicabo magni! Quasi iste pariatur, porro fugiat animi harum, nemo illum sint repellendus quidem beatae sequi. A, magnam alias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quisquam neque quibusdam dolorem facere rerum veritatis? Dignissimos omnis optio quod, porro nihil alias, sapiente dolorem quas corrupti laboriosam minus at. Omnis temporibus deserunt impedit autem commodi officiis sed quos illo, quod nobis id iste, provident facere cupiditate. Expedita quod cupiditate ad incidunt unde vel alias a, sit corrupti. Quisquam quaerat reiciendis quas quam illum error! Ratione, sit unde!
.modal {
overscroll-behavior-y: contain;
}
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae nihil doloribus ratione non, voluptatem quos veritatis cum, praesentium illo unde fugiat officiis vitae nisi omnis, odit excepturi corrupti quasi iste minima ullam fuga eos quidem ex molestias! Dolore, temporibus illum assumenda aliquam, laudantium architecto reiciendis nesciunt quia expedita deserunt veniam. Id unde soluta tempore commodi molestiae mollitia inventore culpa quod in. Ipsa, esse, veniam dolorum placeat incidunt odio ex nam tempore, temporibus totam id explicabo fuga sunt sapiente hic veritatis. Voluptates ipsa dolores ullam perspiciatis nemo nesciunt ipsum est assumenda eius neque numquam voluptas ut natus, impedit illo quaerat maxime cum perferendis recusandae aut optio dolore fuga. Inventore doloremque animi voluptatibus itaque, tenetur ex sunt libero ducimus molestias voluptate cum. Id, tempore quos impedit nesciunt voluptate magni quasi dolore cum et culpa, ipsum in repellendus soluta quibusdam dolores illum. Dignissimos dolore est, sint earum repellendus explicabo rem nisi facilis dolor.
Odit sequi accusamus deleniti! Ab sit tenetur iusto? Quibusdam eligendi sed pariatur sapiente iure. Facilis iste maxime harum laboriosam, explicabo magni! Quasi iste pariatur, porro fugiat animi harum, nemo illum sint repellendus quidem beatae sequi. A, magnam alias.
Odit sequi accusamus deleniti! Ab sit tenetur iusto? Quibusdam eligendi sed pariatur sapiente iure. Facilis iste maxime harum laboriosam, explicabo magni! Quasi iste pariatur, porro fugiat animi harum, nemo illum sint repellendus quidem beatae sequi. A, magnam alias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quisquam neque quibusdam dolorem facere rerum veritatis? Dignissimos omnis optio quod, porro nihil alias, sapiente dolorem quas corrupti laboriosam minus at. Omnis temporibus deserunt impedit autem commodi officiis sed quos illo, quod nobis id iste, provident facere cupiditate. Expedita quod cupiditate ad incidunt unde vel alias a, sit corrupti. Quisquam quaerat reiciendis quas quam illum error! Ratione, sit unde!