@jjlmoya/utils-developer 1.3.0 → 1.5.0

package/src/tool/cssSpecificityCalculator/index.ts

@@ -7,10 +7,6 @@ import type { CssSpecificityCalculatorUI } from './ui';
 
 export type CssSpecificityCalculatorLocaleContent = ToolLocaleContent<CssSpecificityCalculatorUI>;
 
-import { content as es } from './i18n/es';
-import { content as en } from './i18n/en';
-import { content as fr } from './i18n/fr';
-
 export const cssSpecificityCalculator: DeveloperToolEntry<CssSpecificityCalculatorUI> = {
   id: 'css-specificity-calculator',
   icons: {
@@ -18,9 +14,21 @@ export const cssSpecificityCalculator: DeveloperToolEntry<CssSpecificityCalculat
     fg: 'mdi:language-css3',
   },
   i18n: {
-    es: async () => es,
-    en: async () => en,
-    fr: async () => fr,
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
   },
 };
 

package/src/tool/cssToInlineConverter/i18n/de.ts

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'css-zu-inline-html-konverter';
+const title = 'CSS zu Inline HTML konvertieren. Inliner für Emails';
+const description =
+  'Wandeln Sie Ihre Stylesheets und CSS-Klassen in direkt eingebettete Inline-Styles innerhalb Ihres HTML um. Ideal für Newsletter, transaktionale Emails und zuverlässige Web-Layouts.';
+
+const faqData = [
+  {
+    question: 'Warum benötigen Emails Inline-CSS statt externer Stylesheets?',
+    answer:
+      'E-Mail-Clients wie Outlook, Gmail oder Apple Mail filtern oder ignorieren <link>- und <style>-Tags aus Sicherheitsgründen. Die einzige zuverlässige Methode, damit ein Stil in einer E-Mail korrekt angezeigt wird, ist, ihn direkt im style-Attribut des jeweiligen HTML-Elements einzubetten.',
+  },
+  {
+    question: 'Was passiert, wenn ein Element bereits ein eigenes style-Attribut hat?',
+    answer:
+      'Das Werkzeug respektiert vorhandene Inline-Styles und fügt die neuen Eigenschaften dahinter an – es simuliert dabei das Verhalten der CSS-Kaskade: Bei Konflikten überschreiben später deklarierte Eigenschaften frühere.',
+  },
+  {
+    question: 'Funktioniert es auch mit komplexen Selektoren wie :hover oder Media Queries?',
+    answer:
+      'Das Werkzeug verarbeitet Klassen-, ID-, Attribut- und strukturelle Pseudo-Klassen-Selektoren, die DOMParser auflösen kann. Zustandsabhängige Selektoren wie :hover und Media Queries können nicht inline eingebettet werden – sie hängen von der Laufzeitumgebung ab und werden ignoriert.',
+  },
+  {
+    question: 'Wird mein HTML- und CSS-Code an einen Server gesendet?',
+    answer:
+      'Nein. Die gesamte Verarbeitung findet zu 100 % in Ihrem Browser mithilfe der nativen DOMParser-API statt. Kein einziges Byte Ihres Codes verlässt Ihr Gerät – das garantiert vollständige Privatsphäre, auch bei Vorlagen mit vertraulichen Inhalten.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Fügen Sie Ihr HTML ein',
+    text: 'Schreiben oder fügen Sie das HTML, das Sie verarbeiten möchten, in das Feld „Original-HTML" ein. Es kann sich um ein Fragment oder ein vollständiges Dokument handeln.',
+  },
+  {
+    name: 'CSS-Regeln hinzufügen',
+    text: 'Fügen Sie die Klassen und IDs, die Sie einbetten möchten, in das Feld „CSS-Regeln" ein. Das Werkzeug wendet sie unter Berücksichtigung der Selektorspezifität an.',
+  },
+  {
+    name: 'Konvertieren und kopieren',
+    text: 'Klicken Sie auf „CSS in HTML einbetten". Das Ergebnis mit allen Inline-Styles erscheint darunter – bereit zum Kopieren und Einfügen in Ihren E-Mail-Manager oder Ihr CMS.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'de',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'Original-HTML',
+  labelCss: 'CSS-Regeln',
+  labelOutput: 'Ergebnis als Inline-HTML',
+  placeholderHtml: '<div class="meine-klasse">Hallo Welt</div>',
+  placeholderCss: '.meine-klasse { color: red; padding: 10px; }',
+  placeholderOutput: 'Hier erscheint Ihr HTML mit eingebetteten Styles...',
+  btnConvert: 'CSS in HTML einbetten',
+  btnCopy: 'Code kopieren',
+  btnCopied: 'Kopiert!',
+  msgError: 'Verarbeitungsfehler. Prüfen Sie, ob HTML und CSS korrekt sind.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenzen und Dokumentation',
+  bibliography: [
+    {
+      name: 'Can I email: HTML- und CSS-Unterstützungsmatrix für Emails',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: Das globale style-Attribut',
+      url: 'https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: Sicheres Parsen im Browser',
+      url: 'https://developer.mozilla.org/de/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Was ist ein CSS Inliner und wozu brauchen Sie ihn?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bei der Entwicklung moderner Webanwendungen sind wir es gewohnt, Verantwortlichkeiten zu trennen: HTML bildet die Struktur, eine externe CSS-Datei liefert das gesamte visuelle Styling. Doch nicht alle Umgebungen vertrauen externen Stylesheets oder globalen <code>&lt;style&gt;</code>-Tags.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Der bekannteste und strengste Anwendungsfall, in dem externes CSS versagt, ist die <strong>Entwicklung von E-Mail-Vorlagen</strong>. In diesen Umgebungen ist die einzige zuverlässige Methode, damit Schrift, Farbe oder Abstand korrekt dargestellt werden, sie direkt in das Tag einzubetten: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'Das CSS-Problem in E-Mail-Clients',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'E-Mail-Clients wie Microsoft Outlook, Apple Mail oder Gmail sind für ihre restriktiven CSS-Rendering-Engines bekannt. Die meisten filtern oder verwerfen <code>&lt;link&gt;</code>- oder <code>&lt;style&gt;</code>-Tags aus Angst vor Code-Injektionen, die die Leseoberfläche beschädigen könnten.',
+    },
+    {
+      type: 'tip',
+      html: 'Für Newsletter oder transaktionale Emails (Quittungen, Kontobestätigungen) gelten Tabellen und <em>Inline-CSS</em> als Goldstandard in der E-Mail-Marketing-Branche.',
+    },
+    {
+      type: 'title',
+      text: 'So funktioniert das Werkzeug in Ihrem Browser',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Sicheres Parsen:</strong> Verwendet die <code>DOMParser-API</code>, um das eingegebene HTML vorübergehend in ein sicheres virtuelles DOM in Ihrem Browser umzuwandeln.',
+        '<strong>Kaskaden-Simulation:</strong> Analysiert Ihre CSS-Regeln, gewichtet Selektoren nach Spezifität und schreibt die <code>style</code>-Attribute der betroffenen HTML-Elemente durch das Einbetten des Codes um.',
+        '<strong>100 % offline:</strong> Kein einziges Byte Ihres Codes verlässt Ihr Gerät. Vollständige Privatsphäre für Vorlagen mit sensiblen Inhalten.',
+      ],
+    },
+  ],
+};

package/src/tool/cssToInlineConverter/i18n/id.ts

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'konverter-css-inline-html';
+const title = 'Konverter CSS ke Inline HTML untuk Email';
+const description =
+  'Ubah stylesheet dan kelas CSS Anda menjadi style inline yang langsung tertanam dalam HTML. Cocok untuk newsletter, email transaksional, dan tata letak web yang kompatibel lintas platform.';
+
+const faqData = [
+  {
+    question: 'Mengapa email membutuhkan CSS inline, bukan stylesheet eksternal?',
+    answer:
+      'Klien email seperti Outlook, Gmail, atau Apple Mail memfilter atau mengabaikan tag <link> dan <style> demi alasan keamanan. Satu-satunya cara yang terjamin agar sebuah gaya diterapkan dengan benar dalam email adalah dengan menyematkannya langsung pada atribut style setiap elemen HTML.',
+  },
+  {
+    question: 'Apa yang terjadi jika elemen sudah memiliki atribut style sendiri?',
+    answer:
+      'Alat ini menghormati style inline yang sudah ada dan menambahkan properti baru setelahnya, mensimulasikan perilaku kaskade CSS: properti yang dideklarasikan belakangan akan menimpa yang sebelumnya jika terjadi konflik.',
+  },
+  {
+    question: 'Apakah berfungsi dengan selektor kompleks seperti :hover atau media queries?',
+    answer:
+      'Alat ini memproses selektor kelas, id, atribut, dan pseudo-class struktural yang dapat diselesaikan oleh DOMParser. Selektor yang bergantung pada status seperti :hover dan media queries tidak dapat diinline (karena bergantung pada lingkungan runtime) dan akan diabaikan.',
+  },
+  {
+    question: 'Apakah kode HTML dan CSS saya dikirim ke server?',
+    answer:
+      'Tidak. Semua pemrosesan berlangsung 100% di browser Anda menggunakan DOMParser API bawaan. Tidak ada satu byte pun kode Anda yang meninggalkan perangkat Anda, menjamin privasi penuh untuk template yang berisi konten sensitif.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Tempelkan HTML asli Anda',
+    text: 'Tulis atau tempelkan HTML yang ingin Anda proses di kolom "HTML Asli". Bisa berupa fragmen atau dokumen lengkap.',
+  },
+  {
+    name: 'Tambahkan aturan CSS Anda',
+    text: 'Tempelkan kelas dan id yang ingin Anda suntikkan di kolom "Aturan CSS". Alat ini menerapkannya dengan memperhatikan spesifisitas selektor.',
+  },
+  {
+    name: 'Konversi dan salin',
+    text: 'Klik "Suntikkan CSS ke HTML". Hasilnya dengan semua style inline akan muncul di bawah, siap untuk disalin dan ditempel ke pengelola email atau CMS Anda.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'id',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'HTML Asli',
+  labelCss: 'Aturan CSS',
+  labelOutput: 'Hasil HTML Inline',
+  placeholderHtml: '<div class="kelas-saya">Halo Dunia</div>',
+  placeholderCss: '.kelas-saya { color: red; padding: 10px; }',
+  placeholderOutput: 'HTML Anda dengan style tertanam akan muncul di sini...',
+  btnConvert: 'Suntikkan CSS ke HTML',
+  btnCopy: 'Salin Kode',
+  btnCopied: 'Tersalin!',
+  msgError: 'Terjadi kesalahan pemrosesan. Pastikan HTML dan CSS Anda valid.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+  faq: faqData,
+  bibliographyTitle: 'Referensi dan Dokumentasi',
+  bibliography: [
+    {
+      name: 'Can I email: Matriks Dukungan HTML dan CSS untuk Email',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: Atribut global style',
+      url: 'https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: Parsing aman di dalam browser',
+      url: 'https://developer.mozilla.org/en/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Apa Itu CSS Inliner dan Mengapa Anda Membutuhkannya?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dalam pengembangan aplikasi web modern, kita terbiasa memisahkan tanggung jawab: HTML membangun struktur, sementara file CSS eksternal menangani seluruh tampilan visual. Namun, tidak semua lingkungan mempercayai stylesheet eksternal atau tag <code>&lt;style&gt;</code> global.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Kasus penggunaan yang paling umum dan ketat di mana CSS eksternal gagal adalah <strong>Pengembangan Template Email</strong>. Dalam lingkungan ini, satu-satunya cara yang andal agar font, warna, atau margin tampil dengan benar adalah menyematkannya langsung dalam tag: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'Masalah CSS di Klien Email',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Klien email seperti Microsoft Outlook, Apple Mail, atau Gmail dikenal memiliki mesin rendering CSS yang sangat ketat. Sebagian besar memfilter atau membuang tag <code>&lt;link&gt;</code> atau <code>&lt;style&gt;</code> karena khawatir dengan injeksi kode yang bisa merusak antarmuka pembacaan.',
+    },
+    {
+      type: 'tip',
+      html: 'Untuk newsletter atau email transaksional (struk, konfirmasi akun), penggunaan tabel dan <em>CSS inline</em> adalah standar emas di industri email marketing.',
+    },
+    {
+      type: 'title',
+      text: 'Cara Kerja Alat Ini di Browser Anda',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Parsing Aman:</strong> Menggunakan <code>DOMParser API</code> untuk mengubah HTML masukan secara sementara menjadi DOM virtual yang aman di dalam browser Anda.',
+        '<strong>Simulasi Kaskade:</strong> Menganalisis aturan CSS Anda, menerapkan bobot spesifisitas pada selektor, dan memodifikasi atribut <code>style</code> dari elemen HTML yang dipilih dengan menyuntikkan kodenya.',
+        '<strong>100% Offline:</strong> Tidak ada satu byte pun kode Anda yang meninggalkan perangkat Anda. Privasi penuh untuk template dengan konten sensitif.',
+      ],
+    },
+  ],
+};

package/src/tool/cssToInlineConverter/i18n/it.ts

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'convertitore-css-inline-html';
+const title = 'Convertitore CSS in Stili Inline per Email';
+const description =
+  'Trasforma i tuoi fogli di stile e le classi CSS in stili incorporati direttamente nel codice HTML. Ideale per newsletter, email transazionali e layout web affidabili su ogni client.';
+
+const faqData = [
+  {
+    question: 'Perché le email richiedono CSS inline invece di fogli di stile esterni?',
+    answer:
+      'Client di posta come Outlook, Gmail o Apple Mail filtrano o ignorano i tag <link> e <style> per motivi di sicurezza. L\'unico modo garantito perché uno stile venga applicato correttamente in una email è incorporarlo direttamente nell\'attributo style di ciascun elemento HTML.',
+  },
+  {
+    question: 'Cosa succede se un elemento ha già un attributo style proprio?',
+    answer:
+      'Lo strumento rispetta gli stili inline esistenti e aggiunge le nuove proprietà in coda, simulando il comportamento della cascata CSS: le proprietà dichiarate dopo sovrascrivono quelle precedenti in caso di conflitto.',
+  },
+  {
+    question: 'Funziona con selettori complessi come :hover o media query?',
+    answer:
+      'Lo strumento elabora selettori di classe, id, attributo e pseudo-classi strutturali che DOMParser è in grado di risolvere. I selettori dipendenti dallo stato come :hover e le media query non possono essere incorporati inline (dipendono dall\'ambiente di esecuzione) e vengono ignorati.',
+  },
+  {
+    question: 'Il mio codice HTML e CSS viene inviato a qualche server?',
+    answer:
+      'No. Tutta l\'elaborazione avviene al 100% nel tuo browser tramite la DOMParser API nativa. Nessun byte del tuo codice lascia il tuo dispositivo, garantendo la massima privacy anche per template con contenuti sensibili.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Incolla il tuo HTML originale',
+    text: 'Scrivi o incolla l\'HTML che vuoi elaborare nel campo "HTML Originale". Può essere un frammento o un documento completo.',
+  },
+  {
+    name: 'Aggiungi le tue regole CSS',
+    text: 'Incolla le classi e gli id che vuoi iniettare nel campo "Regole CSS". Lo strumento le applica rispettando la specificità dei selettori.',
+  },
+  {
+    name: 'Converti e copia',
+    text: 'Clicca su "Inietta CSS nell\'HTML". Il risultato con tutti gli stili inline apparirà in basso, pronto da copiare e incollare nel tuo gestore email o CMS.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'it',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'HTML Originale',
+  labelCss: 'Regole CSS',
+  labelOutput: 'Risultato HTML Inline',
+  placeholderHtml: '<div class="mia-classe">Ciao Mondo</div>',
+  placeholderCss: '.mia-classe { color: red; padding: 10px; }',
+  placeholderOutput: 'Qui apparirà il tuo HTML con gli stili incorporati...',
+  btnConvert: 'Inietta CSS nell\'HTML',
+  btnCopy: 'Copia il codice',
+  btnCopied: 'Copiato!',
+  msgError: 'Errore di elaborazione. Verifica che HTML e CSS siano validi.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Riferimenti e documentazione',
+  bibliography: [
+    {
+      name: 'Can I email: Matrice di supporto HTML e CSS per le email',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: L\'attributo globale style',
+      url: 'https://developer.mozilla.org/it/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: Parsing sicuro nel browser',
+      url: 'https://developer.mozilla.org/it/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Cos\'è un CSS Inliner e perché ti serve?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Nello sviluppo di applicazioni web moderne siamo abituati a separare le responsabilità: l\'HTML costruisce la struttura, un file CSS esterno fornisce tutto lo stile visivo. Tuttavia, non tutti gli ambienti si fidano dei fogli di stile esterni o dei tag <code>&lt;style&gt;</code> globali.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Il caso d\'uso più diffuso e restrittivo in cui il CSS esterno non funziona è lo <strong>Sviluppo di Template Email</strong>. In questi contesti, l\'unico modo affidabile perché un font, un colore o un margine vengano visualizzati correttamente è incorporarli direttamente nel tag: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'Il problema del CSS nei client di posta',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Client di posta come Microsoft Outlook, Apple Mail o Gmail hanno una storia nota per i loro motori di rendering CSS restrittivi. La maggior parte filtra o scarta i tag <code>&lt;link&gt;</code> o <code>&lt;style&gt;</code> per paura di iniezioni di codice che potrebbero compromettere l\'interfaccia di lettura.',
+    },
+    {
+      type: 'tip',
+      html: 'Per newsletter o email transazionali (ricevute, conferme di account), l\'uso di tabelle e <em>CSS inline</em> è lo standard d\'oro nel settore dell\'email marketing.',
+    },
+    {
+      type: 'title',
+      text: 'Come funziona questo strumento nel tuo browser',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Parsing sicuro:</strong> Usa la <code>DOMParser API</code> per trasformare temporaneamente l\'HTML di input in un DOM virtuale sicuro all\'interno del tuo browser.',
+        '<strong>Simulazione della cascata:</strong> Analizza le tue regole CSS, applica i pesi di specificità ai selettori e modifica gli attributi <code>style</code> degli elementi HTML selezionati iniettando il codice.',
+        '<strong>100% offline:</strong> Nessun byte del tuo codice lascia il tuo dispositivo. Privacy totale per template con contenuti sensibili.',
+      ],
+    },
+  ],
+};