tag - কিভাবে html তৈরি করা যায়




কিভাবে আমি একটি ওয়েবসাইটে অব্যবহৃত ছবি এবং CSS শৈলী খুঁজে পেতে পারি? (10)

পদ্ধতি আছে (ট্রায়াল এবং ত্রুটি ছাড়া) আমি অব্যবহৃত ইমেজ ফাইল খুঁজে পেতে ব্যবহার করতে পারেন? কিভাবে আইডি এবং ক্লাসের জন্য সিএসএস ঘোষণাগুলি সম্পর্কে সাইটটিতে বিদ্যমান নেই?

এটি এমন একটি স্ক্রিপ্ট লেখার উপায় হতে পারে যা সাইট স্ক্যান করে, এটি প্রোফাইল করে এবং কোন চিত্র এবং শৈলী কখন লোড হয় না তা দেখতে।


Chrome ক্যানারি বিল্ডটিতে পরীক্ষামূলক সংস্করণ বৈশিষ্ট্যগুলির একটি হিসাবে " CSS কভারেজ" এর জন্য বিকাশকারী সরঞ্জামদণ্ডে একটি বিকল্প রয়েছে। এই অপশনগুলি টাইমলাইন ট্যাবে আসে এবং অব্যবহৃত CSS এর একটি তালিকা পাওয়ার জন্য ব্যবহার করা যেতে পারে।

দয়া করে নোট করুন যে আপনাকে বিকাশকারী সরঞ্জামদণ্ডের সেটিংসে এই বৈশিষ্ট্যটি সক্ষম করতে হবে। এই বৈশিষ্ট্য সম্ভবত এটি সরকারী ক্রোম রিলিজ করা উচিত।


অনাথ ক্লাস সনাক্তকরণ এবং ডিল করার জন্য TopStyle এর সরঞ্জামগুলির একটি স্যুট রয়েছে। এটি আপনাকে এইচটিএমএলগুলিতে আইডি এবং ক্লাসগুলি কোথায় ব্যবহার করা হয় সে সম্পর্কে প্রতিবেদন দেবে, যা আপনাকে দ্রুত ম্যাপআপে দ্রুত খুলতে এবং ছেড়ে যেতে অনুমতি দেয়। এখানে এই বৈশিষ্ট্য সম্পর্কিত ওয়েবসাইট থেকে ব্লগার রয়েছে:

সাইটের প্রতিবেদন: আপনার নজরে শৈলী ব্যবহার করা হয় যেখানে একটি নজরে দেখুন। কোন স্টাইল শীটগুলিতে সংজ্ঞায়িত না করা স্টাইল ক্লাসগুলিতে আপনি কোথায় প্রয়োগ করেছেন তা খুঁজে বের করুন, বা কোন স্টাইল ক্লাসগুলি আপনি ব্যবহার করেছেন তা বোঝাবেন না।

অপরিচিত ওয়েবসাইট বিচ্ছিন্ন করার জন্য অত্যন্ত দরকারী।

এটা অব্যবহৃত ছবি, যদিও না।


আমি এই টুলটি ফায়ারফক্সের সব সংস্করণের সাথে কাজ করেছিলাম! এটি কীভাবে কাজ করে তা শিখতে একটু সময় লাগে, কিন্তু এটি একবার শুরু হওয়ার পরে এটি বেশ ভাল বলে মনে হয়। এটি সিএসএসের নতুন সংস্করণটি সিএসএস নির্বাচকদের মন্তব্য করে সংরক্ষণ করবে যাতে আপনাকে যদি প্রয়োজন হয় তবে আপনি তাড়াতাড়ি ফিরে যেতে পারেন।

https://addons.mozilla.org/en-US/firefox/addon/css-usage/


এই সামান্য টুলটি আপনাকে কিছু HTML দ্বারা ব্যবহারের জন্য CSS বিধিগুলির একটি তালিকা দেয়।

এখানে কোড পেন উপর

রান কোড স্নিপেটে ক্লিক করুন, তারপরে পূর্ণ পৃষ্ঠাটিতে ক্লিক করুন। তারপর স্নিপেট নির্দেশাবলী অনুসরণ করুন। এটি আপনার HTML / CSS এর সাথে কাজ করার জন্য এটি সম্পূর্ণ পৃষ্ঠাটি চালাতে পারে।

কিন্তু একটি টুল হিসাবে আমার কোড কলম বুকমার্ক করা সহজ।

/* CSS CLEANER INSTRUCTIONS
   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!
*/

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  }
  return cssList;
}

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
        o.push(rules[r].cssText);
      }
    }
  }
  return o;
}

function union(x, y) {
  return unique(x.concat(y));
};

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;
  });
};

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");
}
document.write("</code>");


একটি ফায়ারফক্স এক্সটেনশান রয়েছে যা একটি পৃষ্ঠায় অব্যবহৃত CSS সিলেক্টর খুঁজে পায়। এটি সম্পূর্ণ সাইট মাকড়সা করার জন্য একটি বিকল্প আছে। সংস্করণ 3.01 ফায়ারফক্সের নতুন সংস্করণের সাথে কাজ করা উচিত।

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

এবং এখানে অন্য বিকল্প।

https://addons.mozilla.org/en-US/firefox/addon/css-usage/


এখানে তালিকাভুক্ত সমস্ত সরঞ্জাম সিএসএস জন্য মহান। আমি Dreamweaver & Co. সম্পর্কে জানি না কিন্তু আমি আমার ওয়েবসাইট প্রকল্পগুলি পরিষ্কার করতে সাহায্য করার জন্য একটি ছোট প্রোগ্রাম তৈরি করেছি

Find-Unused-Files

এটি CSS এবং স্টাফগুলির সাথে সহায়তা করে না, বরং অনাথ চিত্র এবং অন্যান্য ধরনের ফাইলগুলির সাথে।

আশা করি এটা সাহায্য করবে!


টি লিটার ব্লগ ব্লগে টিম মার্টোফ দ্বারা উল্লেখ করা হয়েছে, " আপনার সরঞ্জামগুলি পরিষ্কার রাখতে আপনার দুটি সরঞ্জাম ":

csscss

csscss আপনি যে কোনও সিএসএস ফাইলগুলি প্যারাস করবেন এবং আপনাকে জানাবেন কোন নিয়মগুলিতে ডুপ্লিকেট ঘোষণা আছে।

এবং সবচেয়ে প্রাসঙ্গিক প্রশ্ন:
helium-css

হিলিয়াম একটি ওয়েব সাইটে অনেক পৃষ্ঠা জুড়ে অব্যবহৃত CSS অনুসন্ধানের জন্য একটি সরঞ্জাম।

টুল জাভাস্ক্রিপ্ট ভিত্তিক এবং ব্রাউজার থেকে রান।

হিলিয়াম একটি সাইটের বিভিন্ন বিভাগগুলির জন্য ইউআরএলগুলির একটি তালিকা গ্রহণ করে তারপর প্রতিটি পৃষ্ঠা লোড করে এবং প্রতিটি স্টাইলশীটগুলির তালিকা তৈরি করতে পারা দেয়। তারপর URL তালিকাতে প্রতিটি পৃষ্ঠা পরিদর্শন করে এবং স্টাইলশীটে পাওয়া নির্বাচকগুলি পৃষ্ঠাগুলিতে ব্যবহৃত হয় কিনা তা পরীক্ষা করে। অবশেষে, এটি একটি প্রতিবেদন তৈরি করে যা প্রতিটি স্টাইলশীট এবং নির্বাচকদের যে প্রদত্ত পৃষ্ঠাগুলির যে কোনওটিতে পাওয়া যায় নি তা বিশদ করে।


মনে হয় মনে হয় অ্যাডোব ড্রিমওয়েভার বা অ্যাডোব গোলিভ উভয় অনাথ শৈলী ও চিত্র খুঁজে বের করার জন্য একটি বৈশিষ্ট্য রয়েছে; এখন যা মনে করতে পারে না। সম্ভবত উভয়, কিন্তু বৈশিষ্ট্য ভাল লুকানো ছিল।


সিএসএস রেডান্ডেন্সি চেকারটি এমন একটি টুল যা আপনি স্থানীয়ভাবে চালান, আপনি স্টাইলশীটটি পাস করেন এবং URL গুলির একটি তালিকা বা HTML ফাইলের ডিরেক্টরি। এখানে সরঞ্জামের সাইটে প্রদত্ত বর্ণনাটি দেওয়া হয়েছে:

একটি সিএসএস স্টাইলশীট এবং এইচটিএমএল ফাইলের URL গুলির তালিকাভুক্ত একটি .txt ফাইলটি বা HTML ফাইলগুলির একটি ডিরেক্টরি দেওয়া হয়েছে এমন একটি সহজ স্ক্রিপ্ট যা তাদের সবাইকে পুনরাবৃত্তি করবে এবং স্টাইলশীটে সিএসএস বিবৃতিগুলি তালিকাভুক্ত করবে যা HTML এ কখনও বলা হয় না।

মূলত, এটি আপনাকে আপনার CSS ফাইলগুলিকে প্রাসঙ্গিক এবং কম্প্যাক্ট রাখতে সহায়তা করে। এবং এটা যুক্তিযুক্ত সঠিক।


আপনাকে কোনও ওয়েব পরিষেবা দিতে হবে না বা কোনও অ্যাডসনের জন্য অনুসন্ধান করতে হবে না, আপনার কাছে ইতিমধ্যে এটি F12 (Inspector)->Audits->Remove unused CSS rules Google Chrome এ রয়েছে।

স্ক্রীনশট:

আপডেট: 30 জুন, 2017

এখন ক্রোম 59 সিএসএস এবং জেস কোড কভারেজ সরবরাহ করেhttps://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage দেখুন






css