a thoughtful use of digital
There lots of java-scripts to allow an effect such as mouse over on a mobile device (that is without mouse), but there is also a very, very simple solution: to use :active instead of :hover, as in the following example:
@media screen and (max-width: 580px) {
.tooltip:active .tooltiptext {
visibility: visible;
opacity: 1;
}
}
while in desktop screen you can keep.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}If even after adding chrome folder thuderbird doesn’t use your cutomized css, you should try with:
Settings/Options > Advanced > General > Config Editor
toolkit.legacyUserProfileCustomizations.stylesheets > true
Opacity can make an image (semi)transparent, but it affect the text as well, and so the readibility can be difficult. You can see the following example.
your text here
To fix this, you can use the this code background: rgba(0, 0, 0, 0.5);
your text here
It could be not enough to set the height to 100%, or 100vw, you could try with
position: relative; height: auto; min-height: 100% !important;
It worked for me(cfr here)
Si può ricorrere a jquery.
Mettiamo che io voglia applicare la class “noquote” (che toglie le virgolette all’inizio del paragrafo) a un p al cui interno si trova uno span. La sintassi è questa:
$( “p:has(> span)” ).addClass( “noquote” );
Se invece io voglio che p abbia le virgolette all’inizio se lo span ha una certa classe (mettiamo “evid”), la sintassi è la seguente:
$(“.evid”).parent().removeClass(“noquote”);
Se voglio applicare una certa regola dal secondo elemento di un insieme in poi posso usare questa sintassi: “nth-child(n+2)”.
Parliamo di tag html e di css. Voglio che se un p comincia con uno span non venga applicata una certa regola (nella fattispecie “aperte virgolette”). In effetti creo una pagina php con citazioni di autori e capita che un certo item cominci non con le parole dell’autore, ma con una mia introduzione.
Non è possibile agire a livello di puro css, col selettore :not (nella fattispecie :not(p > span): non viene riconosciuto.
Allora bisogna usare jquery
E il gioco è fatto!
Abbiamo trovato un interessante menu drop-down (a tendina) in puro CSS (senza javascript), valido anche per IE (dalla 9 in poi).
Lo trovate qui.
Una attenzione da avere, se ci sono problemi, è di verificare le righe di css con identico nome (ad es. #nav li) per eliminare eventuali proprietà che confliggono con il menu a tendina (ad es. ci è capitato di avere problemi per la presenza della proprietà “display: inline” riferita a “#nav li”).
Può essere utile far vedere solo a un certo browsers certi attributi css. Se il browser è Firefox la sintassi da usare, all’interno del file css è la seguente:
@-moz-document url-prefix() seguita da parentesi graffe che abbraccino tutta la porzione di css che si vuole nascondere agli altri browsers.
Segnalo un interessante tip (da Opera-dev):
You can use attribute selectors with the content property to render icons after a link based on what file format it is or if it is an external one.
a[href $=’.pdf’]:after { content:url(icon-pdf.png);}
a[rel=”external”]:after { /* You can also use a[href ^=”http”]:after */
content:url(icon-external.png);}
the first rule uses a CSS3 selector with substring matching — href $=’.pdf’ means “href attributes with .pdf at the end of the value.”
As with regular expressions, ^ and $ refer to the start and end of a string, respectively. With CSS 3 substring matching attribute selectors, [attribute^=value] and [attribute$=value] allow you to match elements whose attribute content starts or ends with the specified value, while [attribute*=value] selects elements where the value is found anywhere in the attribute.