Se html + css o un'immagine possono raggiungere la mia decorazione desiderata, quale preferisco usare?

Question

Se html + css o un'immagine possono raggiungere la mia decorazione desiderata, quale preferisco usare?

#1 da (2 voti)
#2 da (1 voti)
#3 da (1 voti)

1

Ad esempio, per creare un indicatore di flusso del tipo:

Step 1 > Step 2 > Step 3

Posso:

1. Usa html + css

.concave{
  border-left:1em solid transparent;
  border-top:1em solid orange;
  border-bottom:1em solid orange;
}

.middle{
  background-color:orange;
}

.convex{
  border-left:1em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
}

<table cellspacing="0" cellpadding="0" border="0" style="font-size:30px;">
  <tr>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 1</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
  </tr>
</table>

2. Crea un'immagine di sfondo:

La mia domanda è: se html + css o un'immagine possono ottenere la mia decorazione desiderata, quale preferisco usare?

html web-applications css ui

posta mmmaaa 19.06.2018 - 09:30

fonte

3 risposte

Leggi altre domande sui tag html web-applications css ui

Utilizzo delle convenzioni di codifica C nel codice C ++ [duplicato] Devo proteggere le comunicazioni tra i microservizi in un cluster?

score 2 · Answer 1

Nessun approccio è corretto, perché prima devi utilizzare HTML semantico . Di conseguenza, se hai "passaggio 1" seguito da "passaggio 2", hai davvero un elenco ordinato . Inizia da quello e personalizzalo come vuoi per lo schermo. Usa le immagini di sfondo, poiché non aggiungono alcun significato semantico.

Se necessario, formattato per il supporto di stampa, aggiungi un foglio di stile di stampa.

score 1 · Answer 2

Qualunque sia la soluzione più sensata per il tuo pubblico di destinazione. Ad esempio, se gli utenti devono essere in grado di stampare la pagina e visualizzare l'immagine, utilizzare <img> . Utilizza anche <img> se devi visualizzare un testo alternativo. L'uso di html + css può anche aumentare il tempo di caricamento. Vedi questo e anche questo per ulteriori informazioni .

score 1 · Answer 3

I due approcci non producono lo stesso risultato.

Ad esempio:

Il tuo css scala come un vettore in un punto, ma poi si rompe. Puoi utilizzare i tipi di supporto CSS per cambiare il modo in cui appare su diversi display, ma potrebbe non essere supportato su tutti i browser

L'immagine viene ridimensionata come un raster, utilizza più larghezza di banda per il download ma ha una compatibilità migliore

È necessario disporre di alcuni requisiti prima di poter scegliere quale sia la soluzione migliore per qualsiasi problema specifico. Ma generalmente penso che le priorità del sito web vadano:

Pixel rendering perfetto su tutti i dispositivi
Rendering e reattività superveloce
Basso costo. vale a dire. larghezza di banda ridotta

Le immagini generalmente fanno 1 e 2 molto bene, ma possono cadere su 3 se ne hai troppe.

Penso che per la tua piccola immagine, la larghezza di banda sia insignificante, potrebbe eventualmente essere inserita in una mappa immagine per aumentare ulteriormente le prestazioni