regole css per safari

[DUMAX]

Ciao a tutti,

conoscete un modo per settare alcune regole che funzionino soltanto con il browser Safari?

grazie.

[KillerWorm]

Ciao, per darti delle risposte mirate dovresti specificare meglio il contesto.

Se parliamo di "CSS hack" penso non si possa fare molto affidamento sul supporto di proprietà o sintassi particolari perché le specifiche CSS, per i vari browser, vengono aggiornate di continuo e man mano allineate con quelli che sono gli standard; a meno che non si tratti di una qualche particolare versione per tale browser, ma anche in quel caso è da valutare se un sistema del genere possa funzionare solo per quel determinato browser e non interferisca con tutti gli eventuali altri.

Una valida alternativa può essere l'uso di JavaScript per determinare il browser utilizzato e iniettare il CSS.
Una cosa di questo tipo:

if (navigator.userAgent.includes('Safari')){
  var style = document.createElement('style');
  style.type = 'text/css';
  document.querySelector('head').appendChild(style);
  style.innerHTML = ' -- qui il css per safari -- ';
}

ma, ripeto, sarebbe opportuno chiarire il contesto per capire meglio dove andare a parare.

[DUMAX]

Ciao,
avevo il sospetto che non si potesse fare, infatti mi stavo preparando il piano B che è praticamente simile al tuo suggerimento.

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
      jQuery("<link/>", {
           rel: "stylesheet",
           type: "text/css",
           href: "../css/safari.css"
        }).appendTo("head");
    }

Nel file vado ad inserire tutte le regole css che a questo punto entreranno in funzione soltanto quando il browser sarà il Safari.
Grazie per l'aiuto.

[DUMAX]

Ciao,

pensandoci un po', vorrei evitare di usare questo sistema.
Così ho preparato un file html per farvi vedere il problema.
La pagina è qui:
http://eyenet.it/problema_safari.html

Ho provato con Edge, Firefox, Chrome, Opera ... e i pulsanti "aggiungi al carrello" e "mostra i dettagli", vengono visualizzati nella posizione desiderata:
http://eyenet.it/posizione_desiderata.png

Se invece aprite la pagina in Safari, esce nella posizione sbagliata:
http://eyenet.it/posizione_sbagliata.png

Qualcuno può aiutarmi a risolvere per Safari via CSS?

Grazie mille a tutti.

[KillerWorm]

pensandoci un po', vorrei evitare di usare questo sistema.

pensandoci un po'?!

... ma, giusto per sapere, usando quel sistema sei riuscito a risolvere il problema?

Non ho indagato a fondo ma pare che per la proprietà bottom, di quei due elementi, non stia funzionando il valore che hai espresso in percentuale (attualmente 70%). Non so di preciso perché non funzioni ma se provi ad impostare dei valori fissi, ad esempio in px, allora funziona.

Valuta tu se per posizionare quei due elementi puoi usare valori fissi piuttosto che percentuali.

[DUMAX]

Buongiorno KillerWorm,


grazie per il suggerimento.
Chissà perché mi ero fissato sul position .... invece bastava fissare il bottom :-)


Problema risolto, grazie ancora.