Meglio Javascript o HTML?

Shyson

Utente Attivo
19 Ago 2012
1.145
1
38
Ho la possibilità di mettere il codice in 2 modi, ma non so qual'è meglio:

Codice:
  <!-- HTML -->                          
<ul class="share-buttons">
  <li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsito.it&quote=" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="https://sito.it/icone-social/Facebook.svg" /></a></li>
  <li><a href="https://twitter.com/intent/tweet?source=https%3A%2F%2sito.it&text=:%20https%3A%2F%2Fsito.it" target="_blank" title="Tweet"><img alt="Tweet" src="https://sito.it/icone-social/Twitter.svg" /></a></li>
  <li><a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fsito.it&description=" target="_blank" title="Pin it"><img alt="Pin it" src="https://sito.it/icone-social/Pinterest.svg" /></a></li>
</ul>

<!-- JS -->
<ul class="share-buttons">
  <li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsito.it&quote=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&quote=' + encodeURIComponent(document.URL)); return false;"><img alt="Share on Facebook" src="https://sito.it/icone-social/Facebook.svg" /></a></li>
  <li><a href="https://twitter.com/intent/tweet?source=https%3A%2F%2Fsito.it&text=:%20https%3A%2F%2Fsito.it" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20'  + encodeURIComponent(document.URL)); return false;"><img alt="Tweet" src="https://sito.it/icone-social/Twitter.svg" /></a></li>
  <li><a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fsito.it&description=" target="_blank" title="Pin it" onclick="window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.URL) + '&description=' +  encodeURIComponent(document.title)); return false;"><img alt="Pin it" src="https://sito.it/icone-social/Pinterest.svg" /></a></li>
</ul>
 

Shyson

Utente Attivo
19 Ago 2012
1.145
1
38
Io userei HTML, ma penso che sia più una scelta personale che determinata da convenienza
Funziona meglio il Js, l'altro va a influire sul css.
Però vorrei farti vedere una cosa: queste 3 icone appaiono in fondo a ogni articolo e di ogni pagina (quello in alto nella colonna sinistra). Se nota facilmente che nelle pagine appaiono quadrate con lo sfondo, mentre negli articoli sono rotonde senza sfondo, come mai?

CSS
CSS:
/* Icone social */
ul.share-buttons .sr-only{
    width: 110px;
    list-style: none;
    padding-top: 20px;
    border-top: 1px solid #d6d6d6;
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
ul.share-buttons li {
  display: inline;
}
ul.share-buttons img {
  width: 32px;
}