<script> ট্যাগগুলি কখন দৃশ্যমান হওয়া উচিত এবং কেন তারা করতে পারে?

Question

এমন একটি scriptউপাদান যা স্টাইলযুক্ত হয়ে display:blockদৃশ্যমান দেখা যায়। এটি কেন সম্ভব এবং যেখানে এটি পছন্দসই সেখানে কোনও বাস্তব ব্যবহারের কেস রয়েছে?

td > * {
  display: block;
}

<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>

Comments

আমি <style>সম্পাদনাযোগ্য সামগ্রী সহ একটি দৃশ্যমান সিএসএস দেখেছি । বাস্তব সময়ে প্রভাবগুলি দেখার জন্য দুর্দান্ত উপায়।

— জন ডিভোরাক

আপনার পরবর্তী চ্যালেঞ্জের জন্য, মন্তব্যগুলিকে দৃশ্যমান করার একটি উপায় তৈরি করুন।

— মিস্টার লিস্টার

একই জিনিসটি উল্লেখ করতে এখানে এসেছিলেন, @ জনডভোরাক। আমার মিনিটটি প্রথমবার দেখেছি le আমি কোডেপেনে এটির

— কেজেল্ড

দ্য ডোন ট্র্যাডারের দ্য ওয়েভেজের কথা আমাকে মনে করিয়ে দেয় যখন লুসি অস্লানকে দৃশ্যমান করে তোলে এমন একটি বানান পড়ে, এবং তিনি আশ্চর্য হয়েছিলেন যে যাদু তাকে প্রভাবিত করবে , এবং তিনি মূলত বলেছেন, আপনি কি ভেবেছিলেন যে আমি আমার নিজের নিয়ম অমান্য করব?

— ডেভিড কনরাড

আমি এটি একটি প্রাথমিক প্রশ্ন ভেবে এখানে এসেছি এবং নতুন কিছু শিখতে রেখেছি। আমি <3 সোফ

— জ্যাকসনকর

Answer 1

এইচটিএমএল 5 স্পেসিফিকেশন স্টাইল শিটটি সংজ্ঞায়িত করে যা ব্যবহারকারী এজেন্টরা (ব্রাউজারগুলির মতো) ব্যবহার করা প্রত্যাশিত। বিভাগ 10.3.1 "লুকানো উপাদানগুলির" জন্য শৈলীর তালিকাবদ্ধ করে:

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

যেহেতু আপনি দেখতে পারেন, এটা প্রযোজ্য display: none;করার script।

এটি আপনার ব্যবহারকারী এবং লুকানো scriptউপাদানগুলির মধ্যে একমাত্র "বাধা" । এটি পুরোপুরি ঠিক আছে এবং লেখক স্টাইল শীটের মধ্যে ব্যবহারকারী-এজেন্ট স্টাইল শিটগুলি (এবং অবশ্যই ব্যবহারকারীর স্টাইল শিটের মধ্যেও) শৈলীগুলি ওভাররাইট করতে সক্ষম হবেন বলে লক্ষ্য করা গেছে।

কেউ কেন এটি ব্যবহার করতে চান? একটি ব্যবহারের ক্ষেত্রে পুরানো উপাদানটির অনুরূপ / এর মতো অক্ষরগুলি এড়িয়ে চলা ছাড়া সামগ্রী প্রদর্শন<> করা হয় xmp। scriptউপাদানটি কেবল স্ক্রিপ্টগুলির জন্যই নয়, ডেটা ব্লকগুলির জন্যও (যেমন, মাইম টাইপের কোনও কিছুর জন্য) ব্যবহার করা যেতে পারে।

Comments

ডেটাগুলি ইতিমধ্যে কোড করে রাখতে হবে <script>- ডেটা ব্লকগুলি লোড করা যায় না src।

@ পাউলি সুদর্শনটিহো: হ্যাঁ, যদি ডেটা ব্লক হিসাবে ব্যবহার করা srcহয় তবে scriptউপাদানটিতে বৈশিষ্ট্যটির অনুমতি নেই ।

— অগস্ট

Answer 2

<script>ট্যাগগুলি কেন দৃশ্যমান হতে পারে?

কারণ তারা অন্যগুলির মতো এইচটিএমএল উপাদান এবং সিএসএসকে প্রয়োগ করতে বাধা দেওয়ার জন্য এইচটিএমএল স্পেসিফিকেশনে (যা জটিলতা যুক্ত করবে) বিশেষ কেস বিধিগুলি লেখার কোনও কারণ নেই।

যে কোনও উপাদান স্টাইল করা যেতে পারে। উদাহরণস্বরূপ নিন:

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

সেখানে এমন কোনও ইউসকেস রয়েছে যেখানে এটি চাওয়া হয়েছিল?

অবশ্যই কোনও সাধারণ নেই, তবে সাধারণ নিয়মগুলি আপনি সেগুলিতে প্রয়োগ করতে পারেন এমন সমস্ত কিছু বোঝার জন্য তৈরি করা হয়নি। তারা সাধারণ ক্ষেত্রে জন্য ডিজাইন করা হয়।

Comments

প্রকৃতপক্ষে আপনি যদি ক্রোম ইন্সপেক্টরটিতে কোনও স্ক্রিপ্ট ট্যাগ তাকান, আপনি দেখতে পাবেনuser agent stylesheet: script {display:none}

— নিট দ্য ডার্ক আবসোল

আমি "অন্যের মতো ডোম উপাদানগুলি" তৈরি করতাম। প্রকৃতপক্ষে তারা তাদের পার্সিং বিধিগুলির সাথে বেশ বিশেষ এইচটিএমএল ট্যাগ।

— বার্গি

মজাদার ঘটনা: যেহেতু স্ক্রিপ্টের বিষয়বস্তুগুলি সিডিএটিএ হিসাবে পার্স করা হয়েছে, আপনি অতীতে <script type="text/plain">যেমন ব্যবহার করতে পারেন <xmp>তবে ডাব্লু 3 সি বৈধকরণকারীর সাথে সামঞ্জস্যপূর্ণ হতে পারেন।

— মিস্টার লিস্টার

script {display: block !important;}বিশেষ মামলার বিধি না থাকলে কেন কাজ হয় না?

— wutzebaer

@ Wutzebaer এটি আমার পক্ষে ভাল কাজ করে। আপনি কি নিশ্চিত যে আপনি সবকিছু ঠিকঠাক করছেন? মনে রাখবেন যে scriptট্যাগটি অবশ্যই একটি দৃশ্যমান উপাদানের মধ্যে থাকতে পারে - এটি কেবল আপনাকে scriptদেহে প্রদর্শিত করবে, উদাহরণস্বরূপ headডিফল্টরূপে নয়।

— লুয়ান

Answer 3

আরেকটি (সাধারণ নয়) ব্যবহারের কেস:

আমি মাঝে মাঝে <script>স্টাইল গাইডগুলিতে সংক্ষিপ্ত এইচটিএমএল কোড উদাহরণের জন্য ট্যাগ ব্যবহার করি । এই ভাবে আমাকে এইচটিএমএল ট্যাগ এবং বিশেষ অক্ষরগুলি থেকে বাঁচতে হবে না। এবং পাঠ্য সম্পাদক ট্যাগ স্বয়ংক্রিয়রূপে এবং বাক্য গঠন হাইলাইট করা এখনও কাজ করে। তবে ব্রাউজারে সিনট্যাক্স হাইলাইট যুক্ত করার সহজ উপায় নেই।

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>

Comments

খারাপ নয়, যদিও আমি একটি বৈধ MIME- প্রকার: text/htmlএবং class="codesample"স্টাইল প্রয়োগ করার মতো কিছু ব্যবহার করার পরামর্শ দেব । কেবলমাত্র

— পেডেন্টিক

@ নীথেডার্কআবসোল: "সত্যিকারের" মাইমে টাইপ (বা ভবিষ্যতে যে কোনও একটি বিষয় হয়ে উঠতে পারে) ব্যবহার না করা সম্ভবত এটি নিরাপদ , ঠিক যদি কোনও ব্রাউজার কোনও দিন সেই জাতীয় স্ক্রিপ্টের উপাদানগুলি কোনও উপায়ে পার্স এবং কার্যকর করতে পারে। এটি বলেছিল, আমি x-কাস্টম ধরণের জন্য মানক উপসর্গটি ব্যবহার করতে পছন্দ করব , অর্থাত এটি তৈরি করুন text/x-example।

— ইলমারি করোনেন

Answer 4

সম্ভাব্য ব্যবহারের কেস: ডিবাগিংয়ের উদ্দেশ্যে।

আপনি নথির স্তরে ক্লাস প্রয়োগ করতে পারেন, যেমন eg <body class="debugscript">, তারপরে কিছু সিএসএস ব্যবহার করুন:

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}

Comments

না কেন <html class="debugscript">?

— বার্গি

@ বার্গি এটিও একটি বিকল্প, যদিও এটি সম্ভবত <head>স্ক্রিপ্টগুলি প্রকাশ করবে না কারণ <head>নিজেও display:noneতাই আপনাকে জোর করে তা প্রকাশ করতে হবে যা আরও জটিলতার কারণ হতে পারে।

— নীট দ্য ডার্ক আবসোল

আপনার অর্থ "আরও মজা" বা "আরও ডিবাগিং সম্ভাবনা" :-)

— বার্গি

Answer 5

স্ক্রিপ্ট ট্যাগগুলি ব্যবহার করে ডিফল্টরূপে লুকানো থাকে display:none;। আনোয়ার ¹ অন্তর্নিহিত ভাষার স্পেসিফিকেশন ব্যাখ্যা করে। তবে এগুলি এখনও ডিওমের অংশ এবং সে অনুযায়ী স্টাইল করা যেতে পারে।

এটি বলেছিল, কোনও স্ক্রিপ্ট ট্যাগ ঠিক কী করছে তা মাথায় রাখা গুরুত্বপূর্ণ। যদিও এটির সাথে বিভিন্ন ধরণের এবং ভাষা ব্যবহার করা হত, এটি আর প্রয়োজন হয় না। এখন এটি ধরে নেওয়া হচ্ছে যে জাভাস্ক্রিপ্ট সেখানে রয়েছে এবং ফলস্বরূপ ব্রাউজারগুলি এই ট্যাগগুলি থেকে (বা বোঝা) সম্মুখীন হওয়ার সাথে সাথে স্ক্রিপ্টটির ব্যাখ্যা এবং সম্পাদন করবে।

স্ক্রিপ্টটি কার্যকর হয়ে গেলে ট্যাগের সামগ্রীটি পৃষ্ঠায় কেবল পাঠ্য (প্রায়শই লুকানো থাকে) থাকে। এই পাঠ্যটি প্রকাশিত হতে পারে তবে এটি সরানোও যেতে পারে কারণ এটি কেবল পাঠ্য।

আপনার পৃষ্ঠার নীচে, সমাপনী </html>ট্যাগের ঠিক আগে , আপনি খুব সহজেই এই ট্যাগগুলি তাদের পাঠ্য সহ সরিয়ে ফেলতে পারেন এবং পৃষ্ঠায় কোনও পরিবর্তন হবে না।

উদাহরণ স্বরূপ:

(function(){
    var scripts = document.querySelectorAll("script");
    for(var i = 0; i < scripts.length; i++){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
})()

এটি কোনও কার্যকারিতা সরিয়ে ফেলবে না, কারণ পৃষ্ঠার রাজ্য ইতিমধ্যে পরিবর্তন করা হয়েছে এবং বর্তমান বিশ্ব নির্বাহের প্রসঙ্গে প্রতিফলিত হয়েছে। উদাহরণস্বরূপ, পৃষ্ঠাটি jQuery এর মতো কোনও লাইব্রেরি লোড করে থাকলে ট্যাগগুলি মুছে ফেলার অর্থ এই নয় যে jQuery আর প্রকাশিত হবে না কারণ এটি ইতিমধ্যে পৃষ্ঠার রানটাইম পরিবেশে যুক্ত করা হয়েছে। এটি কেবলমাত্র ডোম পরিদর্শন সরঞ্জামটিকে স্ক্রিপ্ট উপাদানগুলি না দেখিয়ে তৈরি করছে, তবে এটি হাইলাইট করে যে একবার সম্পাদিত স্ক্রিপ্ট উপাদানগুলি কেবলমাত্র পাঠ্য।

_{1. আনোয়ার, থু জুলাই ২০১ 2016, উইটজেবার, "ট্যাগগুলি কখন দৃশ্যমান হওয়া উচিত এবং কেন তারা করতে পারে?", জুলাই 1 10:53, https://stackoverflow.com/a/38147398/1026459}