এইচটিএমএল "ন-জেএস" শ্রেণীর উদ্দেশ্য কী?

510

আমি লক্ষ্য করেছি যে প্রচুর টেম্পলেট ইঞ্জিনে, HTML5 বয়লারপ্লেটে , বিভিন্ন ফ্রেমওয়ার্কগুলিতে এবং সাধারণ পিএইচপি সাইটগুলিতে ট্যাগটিতে no-jsক্লাস যুক্ত হয় <HTML>।

কেন এটি করা হয়? ডিফল্ট ব্রাউজারের এমন কোনও আচরণ রয়েছে যা এই শ্রেণিতে প্রতিক্রিয়া জানায়? কেন সর্বদা এটি অন্তর্ভুক্ত? এটি কি ক্লাস নিজেই অপ্রচলিত রেন্ডার করে না, যদি কোনও "নো-জেএস" কেস না হয় এবং এইচটিএমএল সরাসরি সম্বোধন করা যায়?

এইচটিএমএল 5 বয়লারপ্লেট সূচক html এর একটি উদাহরণ:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

আপনি দেখতে পারেন, <html> উপাদানটির সর্বদা এই শ্রেণি থাকবে। কেন কেউ এমন ব্যাখ্যা করতে পারেন যে এটি এত ঘন ঘন কেন করা হয়?

— Swader
সূত্র

493

মডার্নিজার চললে, এটি "নো-জেএস" শ্রেণিটি সরিয়ে এবং "জেএস" এর সাথে প্রতিস্থাপন করে। জাভাস্ক্রিপ্ট সমর্থন সক্ষম করা আছে কি না তার উপর নির্ভর করে এটি বিভিন্ন সিএসএস বিধি প্রয়োগ করার একটি উপায়।

দেখুন আধুনিকতার পথিকৃত এর সোর্স কোড ।

— গ্রেগরি পাকোস্
সূত্র

5

এটিতে এখানে আরও দুর্দান্ত রচনা লেখা রয়েছে: alistapart.com/articles/…

— হ্যানেল

47

যেহেতু মডার্নিজার "ন-জেএস" এর সাথে "জেএস" ব্যবহার করে, তাই আপনার সিএসএস কোডে যদি / অন্য বিবৃতিটির সমতুল্য করার উপায় হিসাবে আপনি এটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, .myclass { /* CSS code for all versions of your page goes here */ }, .js .myclass { /* This CSS code will only show up if JS is enabled */ }এবং .no-js .myclass { /* This CSS code will only show up if JS is disabled. */ }। আশাকরি এটা সাহায্য করবে. -Nick

— skcin7

33

@ রিঙ্গো: এইচটিএমএল 5 নির্দিষ্ট করে যে কোনও উপাদানের একটি classবৈশিষ্ট্য থাকতে পারে । যদিও এইচটিএমএল 4 প্রযুক্তিগতভাবে না করে, কোনও ব্রাউজার এতে চোট দেয় না; এমনকি যেগুলি এটি সমর্থন করে না কেবল এটি এড়িয়ে চলে এবং আমি বছরের পর বছরগুলিতে তাদের মধ্যে একটিও ব্রাউজার দেখিনি।

— সিএইচও

4

@ জ্যাচএল আমি বুঝতে পারি যে আমি অবশ্যই এখানে ধূমপানের ক্র্যাক করব, তবে আমার কাছে মনে .js { padding: ...}হয় এটি ঠিক আছে যেহেতু আপনি যে কে এটির শরীর = .js প্রয়োগ করেছিলেন হিসাবে আপনি জানেন। আরও সরাসরি আপনার বক্তব্য থেকে, মনে হচ্ছে আপনি দাবি করছেন যে এর body.jsথেকেও খারাপ .js bodyযা আমি অনুসরণ করি না ...

— তারযুক্ত_আর

4

এটি এইচটিএমএল 5-বয়লারপ্লেট উল্লেখ করার মতো এটি এটিকে রাখে <html>এবং এর বিরুদ্ধে কোনও ইস্যু রিপোর্ট করা হয়নি। একরকম এটি প্রয়োগ <html>করা একটি প্রতিষ্ঠিত অনুশীলনে পরিণত হয়েছে এবং লোকেরা তাত্ক্ষণিকভাবে জানতে পারে এটি কী এবং এটি কী করে। শেষ পর্যন্ত, এই অনুশীলন থেকে বিচ্যুত হওয়া আরও আরও প্রশ্ন উত্থাপন করে।

— গ্রেগরি পাকোসজ

109

no-jsবর্গ দ্বারা ব্যবহৃত হয় Modernizr বৈশিষ্ট্য সনাক্তকরণ গ্রন্থাগার। মডার্নিজার লোড হয়ে গেলে এটি প্রতিস্থাপন no-jsকরে js। যদি জাভাস্ক্রিপ্ট অক্ষম থাকে তবে ক্লাস থেকে যায়। এটি আপনাকে সিএসএস লিখতে দেয় যা সহজেই উভয় শর্তকে লক্ষ্য করে।

থেকে Modernizrs 'Anotated উত্স (আর বজায়) :

উপাদান থেকে "নো-জেএস" শ্রেণিটি সরান, যদি তা বিদ্যমান থাকে: docElement.className=docElement.className.replace(/\bno-js\b/,'') + ' js';

পল আইরিশের একটি ব্লগ পোস্ট এখানে এই পদ্ধতির বর্ণনা দিচ্ছে: http://www.paulirish.com/2009/avoiding-the-fouc-v3/

আমি এই একই জিনিসটি করতে পছন্দ করি তবে আধুনিকতা ছাড়াই। আমি নিম্নলিখিত করা <script>মধ্যে <head>শ্রেণী পরিবর্তন করতে jsহলে জাভাস্ক্রিপ্ট সক্রিয় করা হয়। আমি .replace("no-js","js")রেজেক্স সংস্করণটি ব্যবহার করতে পছন্দ করি কারণ এটি কিছুটা কম ক্রিপ্টিক এবং আমার প্রয়োজন অনুসারে।

<script>
    document.documentElement.className = 
       document.documentElement.className.replace("no-js","js");
</script>

এই কৌশলটির আগে, আমি সাধারণত জাভাস্ক্রিপ্টের সাথে সরাসরি জেএস নির্ভর শৈলী প্রয়োগ করতাম। উদাহরণ স্বরূপ:

$('#someSelector').hide();
$('.otherStuff').css({'color' : 'blue'});

সঙ্গে no-jsকৌতুক, এই এখন সঙ্গে কাজ করা যেতে পারে css:

.js #someSelector {display: none;}
.otherStuff { color: blue; }
.no-js .otherStuff { color: green }

এটি পছন্দনীয় কারণ:

এটি কোনও FOUC ছাড়াই দ্রুত লোড হয় (আনস্টাইলযুক্ত সামগ্রীর ফ্ল্যাশ)
উদ্বেগ ইত্যাদি বিচ্ছেদ ...

— জাচ লিসোবেই
সূত্র

1

একটি রেজিএক্সপ ব্যবহার করে আধুনিকীকরণ সংস্করণটি আরও নিরাপদ (এবং সম্ভবত দ্রুত) is

— অ্যান্ড্রু এফ

@ অ্যান্ড্রুএফ - আপনি সম্ভবত কিছুটা প্রসারিত করতে পারেন? এটি কতটা নিরাপদ?

— জ্যাচ লিসোবেই

12

@ জাচএল রেগএক্সএক্স সংস্করণ (এর সাথে \b) এর সাথে মেলে না anno-jsus, অন্যটি এতে পরিবর্তন করে anjsus। no-jsকোনও শ্রেণীর নামের একটি সাধারণ সাবস্ট্রিং নয়, তবে এখনও এই ক্ষেত্রে এটি এস এর সাথে "নিরাপদ" \b।

— Cucu

40

আধুনিকীকরণ.জেএস no-jsক্লাসটি সরিয়ে ফেলবে ।

এটি .no-js somethingজাভাস্ক্রিপ্ট অক্ষম থাকলেই আপনাকে সেগুলি প্রয়োগ করার জন্য সিএসএস বিধি তৈরি করতে দেয় ।

— SLaks
সূত্র

17

no-jsবর্গ, একটি JavaScript স্ক্রিপ্ট দ্বারা সরানো যাতে আপনি পরিবর্তন করতে পারেন / প্রদর্শন / CSS ব্যবহার লুকান জিনিষ যদি JS নিষ্ক্রিয় করা হয়েছে।

— আঙ্গুরের ছিরড়া
সূত্র

আপনি বলেছিলেন "জাভাস্ক্রিপ্ট স্ক্রিপ্ট দ্বারা ন-জেএস ক্লাস সরানো হবে"। তাহলে জাভাস্ক্রিপ্ট কীভাবে কাজ করে (যদি 'না-জেএস' শ্রেণি অপসারণ করতে সক্ষম হয়) যদি এটি অক্ষম থাকে। আপনি আমাকে একটি পরিষ্কার দিতে পারেন?

— haind

2

আপনি ঠিক বলেছেন এবং এটি হ'ল মূল বিষয়: জাভাস্ক্রিপ্ট অক্ষম করা থাকলে, ক্লাসটি থাকবে এবং উদাহরণস্বরূপ CSS ব্যবহার করে এইচটিএমএল অংশটি ব্যবহারকারীর সম্পর্কে সতর্ক করতে আপনি কিছু HTML অংশ প্রদর্শন করতে পারেন। .no-js #js-warning {display: block;}

— মার্ক

সচেতন থাকুন,

— মডার্নিজার

11

এটি শুধুমাত্র আধুনিকায়নে প্রযোজ্য নয়। আমি এর নীচে জাভাস্ক্রিপ্ট সমর্থন আছে কিনা তা যাচাই করতে নীচের মতো কিছু সাইট বাস্তবায়ন করতে দেখছি।

<body class="no-js">
    <script>document.body.classList.remove('no-js');</script>
    ...
</body>

জাভাস্ক্রিপ্ট সমর্থন যদি সেখানে থাকে তবে তা no-jsশ্রেণিটি সরিয়ে ফেলবে । অন্যথায় no-jsবডি ট্যাগে থাকবে। তারপরে কোনও জাভাস্ক্রিপ্ট সমর্থন না করে তারা সিএসএসে শৈলীগুলি নিয়ন্ত্রণ করে।

.no-js .some-class-name {

}

— ফিজার খান
সূত্র

4

আধুনিকায়নের উত্স কোডটি দেখুন, এই বিভাগ:

// Change `no-js` to `js` (independently of the `enableClasses` option)
// Handle classPrefix on this too
if (Modernizr._config.enableJSClass) {
  var reJS = new RegExp('(^|\\s)' + classPrefix + 'no-js(\\s|$)');
  className = className.replace(reJS, '$1' + classPrefix + 'js$2');
}

সুতরাং মূলত এটি শ্রেণিপ্রিফিক্স + no-jsশ্রেণীর সন্ধান করে এবং শ্রেণিপ্রিফিক্স + এর সাথে এটি প্রতিস্থাপন করে js।

এবং এর ব্যবহার, ব্রাউজারে জাভাস্ক্রিপ্ট চলমান না থাকলে অন্যরকম স্টাইল করছে।

— আলিরেজা
সূত্র

1

কোনও ব্রাউজারে ব্যবহারকারী জেএস অক্ষম করেছে বা সক্ষম করেছে তার উপর নির্ভর করে কোনও ওয়েবপৃষ্ঠা স্টাইল করতে ন-জেএস ক্লাস ব্যবহার করা হয়।

অনুযায়ী Modernizr ডক্স :

নো-JS

ডিফল্টরূপে মডার্নিজর পুনরায় লিখবে <html class="no-js"> to <html class="js">। এটি জাভা স্ক্রিপ্ট কার্যকর করে এমন পরিবেশগুলিতে কেবল উন্মুক্ত হওয়া উচিত এমন কিছু উপাদানকে আড়াল করতে দেয়। আপনি যদি এই পরিবর্তনটি অক্ষম করতে চান তবে আপনি আপনার কনফিগারেশনে সক্ষম জেএস ক্লাসকে মিথ্যাতে সেট করতে পারেন।

— জেএসএন সি 11
সূত্র