Necesito verificar en qué navegador se está ejecutando mi aplicación. Específicamente, tiene que ver con la aplicación de algunos estilos especiales solo en Safari.
La forma habitual de hacer esto, pensé que sería la siguiente:
const isSafari = navigator.userAgent.includes('Safari')El problema es que parece que Chrome también tiene Safari en su agente de usuario.
¿Cuál sería una forma más confiable de detectar cuándo se está usando Safari?
¡Gracias!
Editar: también estoy abierto a soluciones que podrían hacerse a través de CSS puro.
Lo que estoy tratando de hacer es agregar un scrollbar-gutter en un div. Sin embargo, para Safari, esto no servirá de nada, por lo que me gustaría que, en ese caso, simplemente configure overflow-y para scroll .
Así es como se ve mi código actualmente:
const App = () => { const isSafari = navigator.userAgent.includes('Safari') // is true for chrome as well! Need something more reliable! return ( <div style={{ border: '1px solid black', ...(isSafari ? { overflowY: 'scroll' } : { scrollbarGutter: 'stable' }) }} > A bunch of content which may or maynot have a scrollbar present. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> ) } ReactDOM.render( <App />, document.getElementById('app') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="app"></div>