کامنت نویسی در CSS - بی اس دیزاین

خب همون طور که توی دوره آموزش HTML دیدین برای کامنت نویسی در زبان HTML روشی وجود داشت که میتونستیم کدهارو برای کاربر نشون ندیم ولی خودمون ازون کدها برای راهنمایی خودمون استفاده کنیم .

توی دوره آموزش CSS از بی اس دیزاین آکادمی در این جلسه میخوایم بهتون یاد بدیم که چطوری میشه توی CSS هم همونطوری که توی دوره HTML کد کامنت میذاشتیم برای اینجا هم بذاریم .

کاربردی که کدهای کامنت دارند برای این هستش که بعدا که به پروژه سر میزنیم و میخایم ویرایش کنیم و یا develop کنیم با این کدهایی که خودمون نوشتیم بفهمیم از کجا به کجا رسیدیم و سریعتر بتونیم پیدا بشیم توی کدها .

کاربرد دیگه هم این هستش که نفر بعدی اگه قرار باشه روی این کدها کار بکنه راحت بتونه برسه به نتیجه و متوجه سلسله مراتب و نحوه کد زدن و … بشه و عمه گرامی برنامه نویس قبلی در امان بمونه !

مثال زیر رو ببینین متوجه ساختار کدهای کامنت در زبان CSS میشین :

				
					/* This is a single-line comment */
p {
  color: red;
}

هرجایی هم که میخواین کد کامنت رو قرار بدید راحت باشین !

				
					p {
  color: red;  /* Set text color to red */
}

حتی میتونین هرچقدر دلتون خواست خط جدید بذارید تو کد های کامنت :

				
					/* This is
a multi-line
comment */

p {
  color: red;
}

مثال زیر هم برای یادآوری کد کامنت گذاری در HTML و الان هم توی دوره آموزش CSS برای کامنت نویسی در CSS آوردیم براتون :

				
					<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* Set text color to red */
}
</style>
</head>
<body data-rsssl=1>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>