10 ترفند کاربردی در HTML و CSS
در این نوشته از سایت قصد داریم 10 ترفند کاربردی در سندهای HTML و CSS را توضیح دهیم.
10 ترفند کاربردی در HTML و CSS
این ترفندها شامل بهبود تجربه کاربری، افزایش امنیت محتوا، بهینه سازی فرمها و مدیریت نمایش عناصر در صفحه است. این نکات ساده اما کاربردی میتوانند توسعه وب را برای سایت شما راحتتر و سادهتر کنند.
باز شدن لینکها در تب جدید
<a href="https://camelcase.ir" target="_blank">باز کردن در تب جدید</a>
با گذاشتن blank_ برای target مشخص میکنیم که لینک در تب جدیدی از مرورگر باز شود بدون اینکه از سایت خارج شود.
غیر فعال کردن قابلیت کپی و انتخاب متن
<p style="user-select: none;">این متن قابل انتخاب یا کپی کردن نیست.</p>
این ترفند برای این است که کاربر نتواند متن را کپی کند، کاربرد این ترفند زمانی است که بخواهیم کاربر از اطلاعات مهم کپی برداری نکند.
ویرایش متن توسط کاربر
<div contenteditable="true">این متن را میتوان ویرایش کرد.</div>
این ترفند برای سیستمهای مدریت محتوا کاربردی است، یعنی مثلا متنی که وجود دارد را کاربر میتواند اضافه یا کم کند.
افزودن Placeholder برای متن در textareaها
<textarea placeholder="متن خود را اینجا وارد کنید..."></textarea>
placeholder برای این است که کاربران زمان وارد کردن اطلاعات خود بدانند هر اطلاعات را در جای خود وارد کنند.
ایجاد دکمه دانلود برای فایلها
<a href="document.pdf" download>دانلود فایل PDF</a>
با گذاشتن download کاربر به محض کلیک روی دکمه دانلود فایل، فایل مورد نظر که میتواند pdf یا تصاویر یا اسناد باشد، مستقیما دانلود میشود.
مخفی کردن یک عنصر از صفحه با hidden
<p hidden>این متن در صفحه قابل مشاهده نیست.</p>
این کاربرد برای این است که بتوان اطلاعاتی را بعدا با CSS به کاربر نشان داد.
ایجاد لینک برای ارسال ایمیل مستقیم
<a href="mailto:info@camelcase.ir">ارسال ایمیل</a>
این ترفند برای ایجاد ارتباط سریع بین کاربران با پشتیبانی سایت با استفاده از ایمیل استفاده میشود.
غیرفعال کردن تغییر مقدار ورودی عدد با اسکرول ماوس
<input type="number" onwheel="return false;" placeholder="عدد را تایپ کنید">
این فیلد ورودی از نوع عدد “type=”number است که فقط مقادیر عددی را میپذیرد. ویژگی onwheel=”return false;” از تغییر ناخواسته مقدار هنگام اسکرول ماوس جلوگیری میکند. همچنین، placeholder=”عدد را تایپ کنید” یک متن راهنما نمایش میدهد تا کاربر بداند چه اطلاعاتی باید وارد کند.
ایجاد فیلد ورودی برای کاراکترهای خاص
<input type="text" pattern="[A-Za-z0-9]{5,10}" title="فقط حروف و اعداد، بین 5 تا 10 کاراکتر">
این فیلد ورودی از نوع متن type=”text” است که با استفاده از pattern=”[A-Za-z0-9]{5,10}” فقط حروف انگلیسی و اعداد را میپذیرد و مقدار ورودی باید بین ۵ تا ۱۰ کاراکتر باشد. ویژگی title=”فقط حروف و اعداد، بین 5 تا 10 کاراکتر” پیامی را نمایش میدهد تا در صورت ورود مقدار نامعتبر، کاربر متوجه محدودیتها شود.
مخفی کردن یک عنصر از صفحه با CSS
<p style="display: none;">این متن مخفی شده است.</p>
این تگ که با استفاده از style=”display: none;” به طور کامل از صفحه حذف میشود، به این معنی که دیگر فضایی در صفحه اشغال نمیکند و برای کاربر قابل مشاهده نیست، اما همچنان در کد HTML باقی میماند و میتوان با CSS یا جاوااسکریپت آن را دوباره نمایش داد.
منتظر نظرات شما هستیم.