Truco: Modificar CSS Google Chrome / Chromium

Bien, por el motivo que sea, a mí al seleccionar un link con el teclado mediante (tab, or shift + tab), me sale un rectangulo en naranja que soy incapaz de verlo en algunas webs o directamente no se muestra, así que navegar con teclado entre links sea hace “a ciegas”, por tanto, la única solución que he encontrado, era mirar de modificar el CSS del navegador, por suerte he visto que no es tedioso en chrome/chromium, simplemente hay que editar un fichero llamado Custom.css


Linux => $HOME/.config/chromium o google-chrome/Default/User StyleSheets/Custom.css
Windows => %LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
Mac => /Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Por defecto el fichero esta vacio, podemos sobrescribir lo que queramos con css, yo simplemente he añadido estas lineas al Custom.css


/* :focus es para todo, puedes usar a:focus, input:focuss, textarea:focus etc */
:focus {
outline-color: purple !important;
outline-style: solid !important;
outline-width: 4px !important;
}

Ya que mi único objetivo era hacer que el recuadro naranja invisible para mí en muchas situaciones, se volviese más grande y de color lila.

Con este pequeño apaño, todo OK!

PD: Si por algún motivo no te sobrescribe el CSS, ejecuta el chrome/chromium con el parámetro “-enable-user-stylesheet”

Instalar mod_pagespeed en Debian Etch & Otras desde el código fuente

Me propuse hoy instalar definitivamente mod_pagespeed, a pesar de que a priori la instalación de este módulo puede ser sencilla, la cosa se complica si tienes una distribución algo antigua y oficialmente no soportada, no obstante, una vez logrado el objetivo de instalar el módulo, mod_pagespeed funciona igual de bien que en las demás distribuciones soportadas, simplemente que los que no podemos actualizar a una versión más actual (Debian Lenny), tenemos que hacer “algo más” para hacerlo funcionar en nuestra distribución, este preceso, es válido para otras distribuciones que tampoco están oficialmente soportadas.

¿Que és mod_pagespeed?, creo que con el video nos va a quedar claro cual es la intención de este módulo

Para realizar este tutorial, tuvimos que abir un ticket a los desarolladores de google, para que nos intentasen solucionar errores que no salían durante la compilación, dónde alfinal todo fué más que correcto por parte de ellos :)

Como requisitos mínimos se exige tener instalado GCC 4.2, si embargo Debian Etch trae de serie GCC 4.1, pero esto no ha añadido ningún problema, ya que finalmente también permite la compilación del módulo con la versión 4.1, de hecho, primero se intentó compilarlo con 4.2, pero aún así daba exactamente los mismos errores de compilación.

Aquí teneís la guia oficial de compilación, para las distribuciones soportadas mediante los fuentes de mod_pagespeed, en la nuestra simplemente se añaden problemas/soluciones para la instalación en distribuciones no soportadas.

Vamos a compilar mod_pagespeed:

# cd /usr/local/src

# svn co http://src.chromium.org/svn/trunk/tools/depot_tools

bash: svn: command not found

# aptitude install subversion

# svn co http://src.chromium.org/svn/trunk/tools/depot_tools

# export PATH=$PATH:/usr/local/src/depot_tools

# mkdir mod_pagespeed

# cd mod_pagespeed

# gclient config http://modpagespeed.googlecode.com/svn/tags/0.9.1.1/src

# gclient sync --force

# cd src

# make BUILDTYPE=Release

make: flock: Command not found
make: *** [out/Release/obj.target/net/instaweb/libmod_pagespeed.so] Error 127

# cd /usr/local/src

# wget http://www.kernel.org/pub/linux/utils/util-linux-ng/v2.18/util-linux-ng-2.18.tar.gz

# tar xvfz util-linux-ng-2.18.tar.gz

# cd util-linux-ng-2.18
# mkdir -p /opt
# ./configure --prefix=/opt/util-linux-ng-2.18
# make
# make install

# export PATH=$PATH:/opt/util-linux-ng-2.18/bin

# cd /usr/local/src/mod_pagespeed/src/

# make BUILDTYPE=Release

CC(target) out/Release/obj.target/apr/third_party/apache/apr/src/locks/unix/proc_mutex.o
third_party/apache/apr/src/locks/unix/proc_mutex.c: In function ‘proc_mutex_proc_pthread_create’:
third_party/apache/apr/src/locks/unix/proc_mutex.c:385: error: ‘PTHREAD_MUTEX_ROBUST_NP’ undeclared (first use in this function)
third_party/apache/apr/src/locks/unix/proc_mutex.c:385: error: (Each undeclared identifier is reported only once
third_party/apache/apr/src/locks/unix/proc_mutex.c:385: error: for each function it appears in.)
third_party/apache/apr/src/locks/unix/proc_mutex.c:393: error: ‘PTHREAD_PRIO_INHERIT’ undeclared (first use in this function)
make: *** [out/Release/obj.target/apr/third_party/apache/apr/src/locks/unix/proc_mutex.o] Error 1

# GYP_DEFINES="use_system_apache_dev=1" gclient runhooks

# make BUILDTYPE=Release

CXX(target) out/Release/obj.target/html_rewriter/net/instaweb/apache/apache_message_handler.o
net/instaweb/apache/apache_message_handler.cc:21:19: error: httpd.h: No such file or directory
net/instaweb/apache/apache_message_handler.cc:25:22: error: http_log.h: No such file or directory
…..
net/instaweb/apache/apache_message_handler.cc:61: error: ‘ap_log_error’ was not declared in this scope
make: *** [out/Release/obj.target/html_rewriter/net/instaweb/apache/apache_message_handler.o] Error 1

# aptitude install apache2-threaded-dev libapr1-dev libaprutil1-dev

# make BUILDTYPE=Release

!POR FIN COMPILA!

# cd installl
# make APACHE_ROOT=/etc/apache2 APACHE_MODULES=/usr/lib/apache2/modules APACHE_USER=www-data staging
# make APACHE_ROOT=/etc/apache2 APACHE_MODULES=/usr/lib/apache2/modules APACHE_USER=www-data install

Cosas a verificar:

Verificar los permisos, y que el módulo se esté cargando mediante el fichero pagespeed.conf

LoadModule pagespeed_module modules/mod_pagespeed.so
LoadModule deflate_module modules/mod_deflate.so

Permisos de escritura www-data en /var/mod_pagespeed
Include conf/pagespeed.conf en el fichero de Apache (apache2.conf o httpd.conf)

Ver las diferencias entre tener activado o no mod_pagesped:

http://www.webpagetest.org

margin:0 auto No me funciona en Internet Explorer!

Bueno, a más de uno seguro que le habrá pasado que su página no consigue centrar el div css de la imagen o texto en Internet Explorer, tal y como lo hacen los otros navegadores.

Existe algunas soluciones, la primera es no dar soporte a Internet Explorer, aunque no es muy viable :D, también puedes usar la opción text-align: center para forzar el centrado, pero en algunas ocasiones implica realizar demasiados cambios y esto también afectaría al comportamiento del resto de navegadores, así que tocaría modificar demasiadas cosas, finalmente la solución que hace que funcina correctamente en Internet Explorer 7-8 es simplemente añadir una Doctype para forzar el tipo de formato html a utilizar, asi de estar manera , Internet Explorer “no se liará” y hará el centrado correctamente, a pesar de que antes hubieses puesto correctamente margin:0 auto que sí que era detectado por el resto de navegadores.

Ejemplo:

¡Como primera linea del fichero html!

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Como detectar la versión de Internet Explorer (JavaScript)

Recientemente hemos añadido soporte para Internet Explorer 6, ya que todavía existen muchas personas que lo utilizan y teníamos a los visitantes de esta versión “descolocados”, aunque recomendamos gratamente actualizar a Internet Explorer 7, peró como todos sabemos, el visitante siempre tiene la razón :P

El problema surge en “¿Como detectamos que versión de Internet Explorer está utilizando?”, pués bien, con este pequeño apaño en JavaScript, podemos especificar código específico para cada versión de Internet Explorer.

<script type="text/javascript">
/*
 Esta variable obtendrá el valor de la versión de JavaScript que utiliza el navegador, 
 por tanto, con este truco, puesto que cada versión de Internet explorer
 trae una específica, és suficiente para determinar que versión utiliza 
*/var ieversion=/*@cc_on function(){ switch(@_jscript_version){ case 1.0:return 3;
      case 3.0:return 4;case 5.0:return 5; case 5.1:return 5; case 5.5:return 5.5;
      case 5.6:return 6; case 5.7:return 7; }}()||@*/0;
      
/* Si es Internet Explorer 6 */if (ieversion == 6) {
 /* Código para IE 6, podemos importar por ejemplo un stilo css esclusivo */ document.write('<style type="text/css"> @import url("stilo-ie6.css");</style>');
} 
</script>

Así solo hace falta ir jugando con la variable ieversion para determinar la versión de Internet Explorer logrando volver a “colocar” de nuevo los visitantes :)

Saludos!