বিদ্যমান সাইটগুলি [বন্ধ] থেকে বেছে বেছে এইচটিএমএল + সিএসএস + জেএস অনুলিপি করার সরঞ্জামগুলি

Question

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

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

Comments

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

— riv_rec

আপনার প্রশ্নের সম্পূর্ণ উত্তর নয়, তবে "এলিমেন্টস" ট্যাবটিতে Chrome ডি সরঞ্জামগুলিতে F2 ইনলাইন সম্পাদনা (এবং আপনি চাইলে অনুলিপি করার জন্য) নির্বাচিত DOM উপাদান এবং সাবট্রিটি খুলবে।

— 10gistic

ক্রোমের একটি খুব আকর্ষণীয় এক্সটেনশন হ'ল "সমস্ত সংস্থান সংরক্ষণ করুন"। এটি ইনস্টল করুন এবং তারপরে Chrome Chrome সরঞ্জাম ট্যাবটির "রিসোর্সেস সেভার" এ নেভিগেট করুন এবং এটি ডাউনলোড করুন!

— ডিমারোস

Answer 1

SnappySnippet

অবশেষে আমি এই সরঞ্জামটি তৈরি করতে কিছু সময় পেয়েছি। আপনি গিথুব থেকে স্ন্যাপ্পি স্নিপেট ইনস্টল করতে পারেন । এটি নির্দিষ্ট (শেষ পরিদর্শন করা) ডোম নোড থেকে সহজ এইচটিএমএল + সিএসএস এক্সট্রাকশনকে অনুমতি দেয়। অতিরিক্তভাবে, আপনি আপনার কোডটি সরাসরি কোডপেন বা জেএসফিডেলে প্রেরণ করতে পারেন। উপভোগ করুন!

অন্যান্য বৈশিষ্ট্য

• এইচটিএমএল পরিষ্কার করে (অপ্রয়োজনীয় বৈশিষ্ট্য অপসারণ, প্রবর্তন স্থির করে)
• সিএসএসকে এটি পঠনযোগ্য করার জন্য অনুকূল করে
• সম্পূর্ণরূপে কনফিগারযোগ্য (সমস্ত ফিল্টার বন্ধ করা যেতে পারে)
• সাথে কাজে ::beforeএবং ::afterসিউডো-উপাদানের
• বুটস্ট্র্যাপ এবং ফ্ল্যাট-ইউআই প্রকল্পগুলির জন্য দুর্দান্ত ইউআই ধন্যবাদ

কোড

স্নেপ্পসনিপেট ওপেন সোর্স এবং আপনি গিটহাবের কোডটি খুঁজে পেতে পারেন ।

বাস্তবায়ন

যেহেতু এটি তৈরি করার সময় আমি অনেক কিছু শিখেছি, তাই আমি অভিজ্ঞ হয়েছি এমন কিছু সমস্যা এবং সেগুলির জন্য আমার সমাধানগুলি ভাগ করে নেওয়ার সিদ্ধান্ত নিয়েছি, সম্ভবত কেউ এটি আকর্ষণীয় বলে মনে করবে।

প্রথম প্রচেষ্টা - getMatchedCSSRules ()

প্রথমে আমি মূল সিএসএস বিধি পুনরুদ্ধার করার চেষ্টা করেছি (ওয়েবসাইটে সিএসএস ফাইল থেকে আসা)। বেশ আশ্চর্যজনকভাবে, এটি খুব সাধারণ ধন্যবাদ window.getMatchedCSSRules(), তবে এটি ভাল কার্যকর হয়নি। সমস্যাটি হ'ল আমরা এইচটিএমএল এবং সিএসএস নির্বাচকদের কেবল একটি অংশ নিয়ে যাচ্ছিলাম যা পুরো ডকুমেন্টের প্রসঙ্গে মিলছে, যা এইচটিএমএল স্নিপেটের প্রসঙ্গে আর মেলে না। যেহেতু নির্বাচকদের পার্সিং এবং সংশোধন করা ভাল ধারণা বলে মনে হচ্ছে না, তাই আমি এই প্রচেষ্টাটি ছেড়ে দিয়েছি।

দ্বিতীয় প্রচেষ্টা - getComputesStyle ()

তারপর, আমি কিছু থেকে শুরু করেছি যে @CollectiveCognition প্রস্তাব - getComputedStyle()। যাইহোক, আমি সত্যিই সমস্ত স্টাইলের ইনলাইনিংয়ের পরিবর্তে সিএসএস ফর্ম এইচটিএমএল আলাদা করতে চেয়েছিলাম।

সমস্যা 1 - সিএসএসকে এইচটিএমএল থেকে পৃথক করা

এখানে সমাধানটি খুব সুন্দর ছিল না তবে বেশ সোজা ছিল। আমি নির্বাচিত সাবট্রির সমস্ত নোডকে আইডি নিয়োগ করেছি এবং উপযুক্ত সিএসএস বিধি তৈরি করতে সেই আইডি ব্যবহার করেছি।

সমস্যা 2 - ডিফল্ট মান সহ বৈশিষ্ট্য অপসারণ

নোডগুলিতে আইডি বরাদ্দ করা খুব সুন্দরভাবে কাজ করেছে, তবে আমি জানতে পেরেছি যে আমার প্রতিটি সিএসএস বিধিতে CSS 300 এর সম্পূর্ণ বৈশিষ্ট্য পুরো সিএসএসকে অপঠনযোগ্য করে তোলে।
দেখা যাচ্ছে যে getComputedStyle()প্রদত্ত উপাদানটির জন্য গণনা করা সমস্ত সম্ভাব্য সিএসএস বৈশিষ্ট্য এবং মানগুলি প্রদান করে। তাদের কিছু খালি যেখানে কারওর ব্রাউজারের ডিফল্ট মান রয়েছে। ডিফল্ট মানগুলি সরাতে আমাকে ব্রাউজার থেকে প্রথমে এগুলি পেতে হয়েছিল (এবং প্রতিটি ট্যাগের আলাদা আলাদা ডিফল্ট মান থাকে)। সমাধানটি হ'ল ওয়েবসাইট থেকে আগত উপাদানগুলির শৈলীর সাথে একই উপাদানের সাথে খালি intoোকানো তুলনা করা হবে <iframe>। যুক্তিটি এখানে ছিল যে কোনও খালি শৈলীর শীট নেই <iframe>, সুতরাং আমি যুক্ত প্রতিটি উপাদানটিতে কেবলমাত্র ডিফল্ট ব্রাউজার শৈলী ছিল। এইভাবে আমি বেশিরভাগ সম্পত্তি যে তুচ্ছ ছিল তা থেকে মুক্তি দিতে সক্ষম হয়েছি।

সমস্যা 3 - কেবল শর্টহ্যান্ডের বৈশিষ্ট্যগুলি রাখা

পরবর্তী জিনিস আমি স্পষ্ট করেছিলাম যে শর্টহ্যান্ড সমতুল্য সম্পত্তিগুলি অযথা মুদ্রিত হয়েছিল (যেমন সেখানে ছিল border: solid black 1pxএবং তখন border-color: black;, এটি border-width: 1px) it
এটির সমাধানের জন্য আমি সংখ্যার সমান সংখ্যক বৈশিষ্ট্যগুলির একটি তালিকা তৈরি করেছি এবং ফলাফলগুলি থেকে সেগুলি ছাঁটাই করেছি।

সমস্যা 4 - উপসর্গযুক্ত বৈশিষ্ট্যগুলি সরানো

প্রতিটি নিয়ম সম্পত্তি সংখ্যা উল্লেখযোগ্যভাবে পূর্ববর্তী অপারেশনের পর কম হয়, কিন্তু আমি দেখেছি যে, আমি অনেক ছিল গোবরাট -webkit-পূর্বে সমাধান বৈশিষ্ট্য যে আমি কখনো শুনতে করেছি ( -webkit-app-region? -webkit-text-emphasis-position?)।
আমি এই বৈশিষ্ট্য কোনো রাখা উচিত, কারণ এগুলির কয়েকটি দরকারী করলো (হতাশ ছিল -webkit-transform-origin, -webkit-perspective-originইত্যাদি)। এটি কীভাবে যাচাই করা যায় তা আমি খুঁজে পাইনি, এবং যেহেতু আমি জানতাম যে এই সম্পত্তিগুলি বেশিরভাগ সময় কেবল আবর্জনা থাকে, তাই আমি সেগুলি মুছে ফেলার সিদ্ধান্ত নিয়েছিলাম।

সমস্যা 5 - একই সিএসএস বিধি সমন্বিত

পরবর্তী সমস্যাটি আমি স্পষ্ট করেছিলাম হ'ল একই সিএসএস বিধিগুলি বারবার পুনরাবৃত্তি হয় (যেমন প্রতিটি <li>সিএসএস আউটপুটে একই শৈলীর সাথে একই নিয়ম তৈরি হয়েছিল)।
এটি কেবল একে অপরের সাথে নিয়মের তুলনা করার এবং এগুলির সাথে সংযুক্ত করার মতো বিষয় যা ঠিক একই বৈশিষ্ট্য এবং মানগুলির সেট করেছিল। ফলস্বরূপ, পরিবর্তে #LI_1{...}, #LI_2{...}আমি পেয়েছিলাম #LI_1, #LI_2 {...}।

সমস্যা 6 - পরিষ্কার করা এবং এইচটিএমএল ইনডেন্টেশন ফিক্সিং

যেহেতু আমি ফলাফলটি নিয়ে খুশি ছিলাম, তাই আমি এইচটিএমএল এ চলেছি। এটি একটি জগাখিচুড়ি মনে হয়েছিল, বেশিরভাগ কারণ outerHTMLসম্পত্তিটি সার্ভার থেকে ফিরে আসার মতোই এটি ফর্ম্যাট করে।
এইচটিএমএল কোডটি outerHTMLপ্রয়োজনীয় জিনিসগুলি থেকে নেওয়া কেবলমাত্র একটি সাধারণ কোডের পুনরায় ফর্ম্যাটিং। যেহেতু এটি প্রতিটি আইডিইতে কিছু উপলভ্য, তাই আমি নিশ্চিত ছিলাম যে কোনও জাভাস্ক্রিপ্ট লাইব্রেরি রয়েছে যা হুবহু এটি করে। এবং দেখা যাচ্ছে যে আমি ঠিক ছিলাম (জ্যাকিউরি-ক্লিন) । আরো কি, আমি অপ্রয়োজনীয় বৈশিষ্ট্যাবলী অপসারণ অতিরিক্ত (পেয়েছেন style, data-ng-repeatইত্যাদি)।

সমস্যা 7 - ফিল্টারগুলি সিএসএস ভেঙে

যেহেতু এমন একটি সম্ভাবনা রয়েছে যে কিছু পরিস্থিতিতে উপরে উল্লিখিত ফিল্টারগুলি স্নিপেটে সিএসএসকে ভেঙে ফেলতে পারে, তাই আমি তাদের সকলকে optionচ্ছিক করে তুলেছি। আপনি সেটিংস মেনু থেকে তাদের অক্ষম করতে পারেন ।

Comments

@ কনরাডডজুইনেল, আমি কোনও পৃষ্ঠার মধ্যে প্রোগ্রামিকভাবে এটি করার একটি উপায় সন্ধান করছি (একটি নির্দিষ্ট ডিওএম সাবট্রি মুদ্রণের জন্য, কেবল এটি একটি নতুন উইন্ডোতে অনুলিপি করুন এবং print())। জেএস-এ একে একে কলযোগ্য ফাংশন হিসাবে তৈরি করা আপনার পক্ষে (আপনার জন্য বা কারও পক্ষে আপনার রেপো কাঁটাচামচ করার জন্য) কতটা কঠিন হবে?

— হ্যাশব্রাউন

@ হ্যাশব্রাউন আমাকে মেইল ​​করুন এবং আমরা বিশদ কথা বলতে পারি - আমার ধারণা এটি খুব সহজ হবে।

— কনরাড জজুইনেল

@KonradDzwinel প্রচেষ্টার জন্য এত আপনাকে ধন্যবাদ, কিন্তু আমি যদি পিএইচপি ফাংশন নোড উপাদান 'file_get_contents ($ URL)' পেতে চান, সেখানে কোনো সমাধান, এখানে আমার পোস্টে হল: stackoverflow.com/questions/21419857/ …

— ইয়াসাইন এডৌরি

মহান কাজ! তবে উপাদানটিতে কাজ করে এমন জেএস কোডটি অন্তর্ভুক্ত করা কি সম্ভব?

— t31321

@ কনরাডডজুইনেল ইতিমধ্যে আমাকে এতে মারধর করেছে: github.com/kdzwinel/SnappySnippet/issues/37 ।

— ডেভিড কেভেনি

Answer 2

আমি প্রাথমিকভাবে এই প্রশ্নটি জিজ্ঞাসা করেছি আমি একটি ক্রোম (বা ফায়ারফক্স) সমাধান খুঁজছিলাম, কিন্তু আমি ইন্টারনেট এক্সপ্লোরার বিকাশকারী সরঞ্জামগুলিতে এই বৈশিষ্ট্যটি জুড়ে হোঁচট খেয়েছি। আমি যা খুঁজছি তা অনেক সুন্দর (জাভাস্ক্রিপ্ট বাদে)

ফলাফল:

Comments

আইই 11ও কাজ করে। তবে বিকল্পটি সরাসরি উপাদানটিতে ডান ক্লিক থেকে অ্যাক্সেসযোগ্য।

— রোডলফো জোর্হে নিমের নোগুইরা

বাহ, অবশেষে একটি উদাহরণ যেখানে আইআই ডিভলগুলি উচ্চতর!

— dmnd

সেরা সমাধানটি আমি এই পৃষ্ঠায় তালিকাবদ্ধ অন্য সকলের সাথে তুলনা করার চেষ্টা করেছি। উত্সাহিত সিএসএস + এইচটিএমএল মূল সিএসএস নাম রাখার সময় দুর্দান্ত পরিষ্কার, মানে এইচটিএমএল মূলটির মতোই।

— xoofx

পবিত্র ক্রেপ যা দুর্দান্ত। @Xoofx- এর এই সিদ্ধান্তগুলি নিশ্চিত করতে পারে যে এইচটিএমএল মার্কআপ একই রয়েছে তবে তিনি আরও মন্তব্য করতে চেয়েছিলেন যে এটি সত্যই শৈলীর সাথে মেলে দেওয়ার জন্য প্রয়োজনীয় কঙ্কালের পিতামাতার মোড়কের উপাদানগুলিও আউটপুট করে।

— ড্যানিয়েল সোকলোভস্কি

এটি ব্যবহৃত। সঠিকভাবে কাজ করার জন্য চটজলদি স্নিপেট পাওয়া যায়নি (জটিল এইচটিএমএল এবং সিএসএস)। আমি বিশ্বাস করতে পারি না এটি আসলে কাজ করেছিল। এবং ঠিক তাই লোকেরা জানেন, আমি এই বৈশিষ্ট্যটি কেবল এক্সপ্লোরার প্রান্তে দেখিনি।

— ওয়াটসন

Answer 3

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

কোনও উপাদানটির জন্য এইচটিএমএল অনুলিপি করার আগে এটি (জাভাস্ক্রিপ্ট কনসোলে) চালানো প্যারেন্ট উপাদানগুলির জন্য সমস্ত গণিত শৈলীর পাশাপাশি সমস্ত শিশু উপাদানকে ইনলাইন শৈলীর বৈশিষ্ট্যে স্থানান্তরিত করবে যা এইচটিএমএলের অংশ হিসাবে উপলব্ধ হবে into ।

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

এটি মোট হ্যাক এবং আপনার কাছে "ওয়েস্ট" সিএসএস বৈশিষ্ট্যগুলি প্রচুর পরিমাণে পাওয়া যাবে তবে কমপক্ষে আপনার শুরু করা উচিত।

Comments

দুর্দান্ত উত্তর, কিন্তু ... আসল উত্তরের সাথে সম্পর্কিত নয়, এর জন্য কী ... লুপ সিনট্যাক্স? এটি আমার কাছে অস্পষ্ট হিসাবে পড়েছে।

— স্টিভ ক্যাম্পবেল

এটি দুর্দান্ত, কেবল মূল উপাদানটিকে মিস করে। এটিও যুক্ত করুন: el.setAttribute ("শৈলী", উইন্ডো.জেটকম্পিউটেড স্টাইল (এল) .cssText);

— কারমান কেরতেস

ক্রোম কনসোলে,। क्য়েরিজিলেক্টর আমার জন্য বাতিল হয়ে গেল। সুতরাং এটি নিম্নলিখিতটিতে পরিবর্তন করুন এবং এটি কাজ করেছে: var el = document.getElementById ("# সামিড"); el.setAttribute ("স্টাইল", উইন্ডো.জেটকম্পিউটস স্টাইল (এল) .cssText); var els = el.getElementsByTagName ("*"); (var i = -1, l = els.length; ++ i <l;) {els [i] .setAttribute ("শৈলী", উইন্ডো। বিটকম্পিউটস স্টাইল (এলএস [i])। সিএসএসটেক্সট); }

— ভিক্টর টাঙ্গো

Answer 4

বহু বছর আগে এই সরঞ্জামটি একই উদ্দেশ্যে তৈরি করেছি:
http://www.betterprogramming.com/htmlclipper.html

আপনি এটি ব্যবহার এবং উন্নত স্বাগত জানাই।

Comments

এই মুহূর্তে আমার ঠিক এটি দরকার। অনেক ধন্যবাদ ... 4 বছর আগে উপলব্ধ এই সমাধানের কথা চিন্তা করে ...

— fro_oo

Answer 5

এটি স্ক্র্যাপবুক নামে ফায়ারব্যাগ প্লাগইন দ্বারা করা যেতে পারে

আপনি সেটিংসে জাভাস্ক্রিপ্ট বিকল্প চেক করতে পারেন

সম্পাদনা:

এই এটিও করতে পারেন সাহায্যের

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

Comments

স্ক্র্যাপবুকটি দুর্দান্ত দেখাচ্ছে - দুর্ভাগ্যক্রমে সর্বশেষ সংস্করণ (1.4.5) এবং পূর্ববর্তী দুটি পর্যালোচনা (1.4.3) ওএসএক্স / এফএফ 3.6.1-তে আমার জন্য কাজ করবে না। কারও এই কাজ আছে?

— পিটারোপেটার

আমি চাই আমি আরও নিখুঁতভাবে সংরক্ষণের জন্য একটি নোড বেছে নিতে পারতাম, তবে এটি বেশ ভালভাবে কাজ করেছে

— কেনওয়ারার

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

— mc0e

Answer 6

divclip Florentin Sardan এর একটি আপডেট সংস্করণ htmlclipper

আধুনিক বর্ধিতকরণ সহ: ES5, HTML5, স্কোপড সিএসএস ...

আপনি প্রোগ্রামিয়ালি এর সাথে একটি স্টাইলাইজড ডিভ এক্সট্রাক্ট করতে পারেন:

var html = require("divclip").bySel(".article-body");
console.log(html);

উপভোগ করুন।

Comments

ভাল একটা! একটি যাদুমন্ত্র মত কাজ করে! আমি কিছু পরিবর্তন করেছি যাতে এটি কেবল ক্রোমে চালানো যায়। কেবল 'রফতানি' এবং 'প্রয়োজনীয়' নির্ভরতা অপসারণ করুন এবং সেগুলি ক্রোম স্নিপেটে অনুলিপি করুন। তারপরে কনসোলে টাইপ করুন copy(divclip.bySel('.topbar'))যা প্রসেসড আউটপুটটি ক্লিপবোর্ডে অনুলিপি করবে! ;)

— কেন

একটি ত্রুটি রয়েছে: শেলপ্রড.এমএসকিডিএন.com/16.00.1692.002/en-US/JSC/O365ShellG2Plus.js21 'ডোম উইন্ডো'-তে' পোস্টম্যাসেজ 'চালানোতে ব্যর্থ: লক্ষ্য উত্সটি সরবরাহ করা হয়েছে (' portal.office.com ' ) করে প্রাপক উইন্ডোর মূল ('নাল') এর সাথে মেলে না।

— স্লাভা

Answer 7

কোনও প্লাগইন প্রয়োজন নেই। এটি খুব সহজেই খুব সহজেই ইন্টারনেট এক্সপ্লোরার 11 টি নেটিভ বিকাশকারী সরঞ্জামের সাহায্যে করা যেতে পারে very কোনও উপাদানটির ঠিক ডানদিকে যান এবং সেই উপাদানটি পরীক্ষা করুন এবং কিছু ব্লকে ডান ক্লিক করুন এবং "শৈলীর সাথে উপাদান অনুলিপি করুন" নির্বাচন করুন। আপনি এটি নীচের চিত্রটিতে দেখতে পারেন।

এটি সিএসএস কোডটি খুব পরিষ্কার সরবরাহ করে

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

Comments

বাহ, এটি মাইক্রোসফ্ট এজ এ পুরোপুরি কাজ করেছে। এইচটিএমএল ক্লিপার এবং স্নাপিসনিপেট চেষ্টা করেছেন তবে আমি অনুলিপি করার চেষ্টা করছি এমন উপাদানগুলির প্রতিক্রিয়া বজায় রাখতে সমস্যা রয়েছে had

— ম্যাট

এটি আশ্চর্যজনক, পুরোপুরি ভাল কাজ করে।

— snit80

Answer 8

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

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en

Comments

আমি পছন্দ করি এটি কীভাবে সমস্ত নির্বাচককে মূল হিসাবে রাখে।

— হাজামি

এটি কীভাবে স্নিপেট স্নিপেট ক্রোম এক্সটেনশনের সাথে তুলনা করে?

— পটোশি パ ト

Answer 9

এর একক সমাধান সহ একটি সরঞ্জাম আমি অসচেতন, তবে আপনি ফায়ারব্যাগ এবং ওয়েব বিকাশকারী এক্সটেনশন ব্যবহার করতে পারেন একই সাথে ।

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

এটি আপনি যা চান ঠিক তা নয় (প্রতিটি কিছুর জন্য একটি ক্লিক করুন), তবে এটি বেশ কাছাকাছি এবং অন্তত স্বজ্ঞাত।

Comments

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

— মুহাদ্দে

Answer 10

আমার ফায়ারব্যাগেও এই বৈশিষ্ট্যটি দরকার! ততক্ষণে, অন্য পদ্ধতির ক্লাসগুলি সরিয়ে ফেলার জন্য সিএসএসকে ইনলাইন শৈলীতে রূপান্তর করতে এই অনলাইন পরিষেবাটি ব্যবহার করা ।

Answer 11

http://clipboardjs.com এটি এবং বেশ ভাল করে। যদিও অনুলিপি করা সংস্করণটি আপনার প্রত্যাশাটি মূল হিসাবে ঠিক তাই আপনি এটি খেলতে এবং এটি শিখতে পারেন তবে বাস্তববাদী হতে পারে না।

Answer 12

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

আমি যখন কোনও দ্রুপাল সাইটে কাজ করছিলাম তখন আমি সবচেয়ে সহজতম উপায়টি পেয়েছি। আমি উইসইভিগ সি কেডিটার ব্যবহার করি।

Answer 13

jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

ব্যবহার:$("#login_wrapper").getStyles()

Comments

আমার প্রয়োজনের জন্য এটি বেশ আশাব্যঞ্জক দেখাচ্ছে, কারণ এটি গেটকম্পিউডস্টাইলের সীমাবদ্ধতাগুলি এড়িয়ে চলে। আমি CSS এর আসল পাঠ পেতে কীভাবে এটি ব্যবহার করব তা নিশ্চিত হওয়ার জন্য আমি জাভাস্ক্রিপ্ট নুব মাত্র।

— mc0e

আমি jQueryপরিবর্তে ব্যবহারের জন্য ব্যবহারটি পরিবর্তন করেছি $, যা আমাকে কিছুটা পথ পায় তবে এখন আমি SecurityError: The operation is insecure. কোনও পয়েন্টার পাই ?

— mc0e

Answer 14

আমি শীর্ষে দেওয়া উত্তরটি মানিয়ে নিয়েছি ড্রাগ্রেবল বুকমার্কলেট হিসাবে মানিয়ে নিয়েছি।

কেবল এই পৃষ্ঠাটি দেখুন এবং আপনার বুকমার্ক বারে "রান করুন jQuery কোড" বোতামটি টানুন।

Comments

একটি ত্রুটি দেয়: ত্রুটি: সিনট্যাক্স এরর: নিরবচ্ছিন্ন স্ট্রিং আক্ষরিক

— বার্নি

@ বার্নি: তার অর্থ, আপনার উত্তরটি এখানে অনুলিপি করা উচিত এবং এ থেকে একটি স্নিপেট তৈরি করা উচিত। এটি উত্তর নয়, তবে আমি একটি উত্তরের পরিবর্তে এটিকে একটি মন্তব্য করার পরামর্শ দিচ্ছি

— মো হারাদ এ

Answer 15

একটি ফায়ারফক্স প্লাগইন রয়েছে যা পুরো পৃষ্ঠার এইচটিএমএল, সিএসএস ইত্যাদি সংরক্ষণ করে but

আমি মনে করি IE 5.5 এর মধ্যে আপনি যা খুঁজছিলেন তা ছিল;)

Comments

ওহো! আমরা সেই পৃষ্ঠাটি খুঁজে পাই না।

— হামজা জাফির

Answer 16

আমি এখানে উত্তর হিসাবে উল্লিখিত সমস্ত সরঞ্জাম দিয়ে গেছে। তবে তারা আপনি যে সুন্দর মুখটি সন্ধান করছেন তার সাথে বারবার, নোংরা HTML সিএসএস দেয়। তারা আপনাকে জেএস দেয় না।

আমি কি করবো:

1. প্রথমে আমি বিজ্ঞাপনগুলিকে ফিল্টার করি যা পৃষ্ঠায় প্রয়োজন হয় না
2. তারপরে, সংযোগের সংস্থান সহ সম্পূর্ণ ওয়েবপৃষ্ঠা সংরক্ষণ করুন।
3. অপ্রয়োজনীয় এইচটিএমএল, সিএসএস এবং জেএস সরান
4. একযোগে সংযোগ সংস্থানগুলি সাবধানতার সাথে চালিয়ে যান।