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




করা যায় (13)

এই সামান্য টুলটি আপনাকে কিছু 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>");

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

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


অব্যবহৃত চিত্র ফাইলগুলি খুঁজে পেতে একটি সরঞ্জাম সম্পর্কে আপনার প্রশ্নের উত্তর দেওয়ার জন্য, আপনি আপনার সাইটটি ব্যবহার করে এমন সমস্ত চিত্র খুঁজে পেতে আপনার সাইটের মাকড়সা করতে Xenu লিঙ্ক Sleuth ব্যবহার করতে পারেন। তারপর Xenu আপনাকে FTP অ্যাক্সেসের জন্য অনুরোধ করে যাতে এটি অনাথ ফাইলগুলি খুঁজে পেতে আপনার ডিরেক্টরিগুলি ক্রল করতে পারে। আমি এখনও এটি একটি উত্পাদন সার্ভারে ব্যবহার করা হয় নি কিন্তু এটি দেখতে যোগ্য বলে মনে হয়।

সম্পাদনা করুন: আপনি কেবল জাভাস্ক্রিপ্ট দ্বারা ব্যবহৃত ইমেজ মুছে না সতর্কতা অবলম্বন করা আছে।


ওয়ারি চেষ্টা করুন - ওয়েব অ্যাপ্লিকেশন রিসোর্স ইন্সপেক্টর।

এটি অব্যবহৃত ছবি, অব্যবহৃত এবং সদৃশ CSS / JS খুঁজে বের করে।

লিঙ্ক: wari.konem.net


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


একটি ফাইল স্তর:

সাইটটি আক্রমণাত্মকভাবে মাকড়সা করার জন্য wget ব্যবহার করুন এবং তারপরে HTTP সার্ভার লগগুলি অ্যাক্সেস করা ফাইলগুলির তালিকা পেতে প্রক্রিয়া করুন, সাইটের ফাইলগুলির সাথে এটি বিচ্ছিন্ন করুন

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

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

helium-css

http://www.unknownerror.org/opensource/geuis/helium-css


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

csscss

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

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

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

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

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


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

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


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

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

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

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


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

স্ক্রীনশট:

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

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


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

Find-Unused-Files

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

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


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

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

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


label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

এটি নির্বাচিত উপাদানগুলির জন্য একটি ব্যাকগ্রাউন্ড রঙ ব্যবহার করে এবং আমি ছবিটি সরিয়ে ফেলেছি ..





html css