Foros del Web » Creando para Internet » CSS »

CSS validar para todos los navegadores

Estas en el tema de CSS validar para todos los navegadores en el foro de CSS en Foros del Web. hola comunidad! estoy tratando de hacer que mi diseño se vea igual en todos los navegadores pero no lo logro. estuve leyendo sobre hacks y ...
  #1 (permalink)  
Antiguo 07/05/2014, 08:19
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 9 años, 11 meses
Puntos: 1
Información CSS validar para todos los navegadores

hola comunidad!
estoy tratando de hacer que mi diseño se vea igual en todos los navegadores pero no lo logro. estuve leyendo sobre hacks y algunas librerías. pero nada me funcionó.
espero me puedan ayudar.
Gracias!

les dejo lo que quiero validar

body {
height: 100%;
background-color: black;
Background-image: linear-gradient(0, transparent 50%, black 50%);
background-image: linear-gradient(0, transparent 50%, #395F5D 50%);
background-image: -moz-linear-gradient(0, transparent 50%, #395F5D 50%);
background-image: -webkit-linear-gradient(0, transparent 50%, #395F5D 50%);
background-size: 3px;
}
  #2 (permalink)  
Antiguo 07/05/2014, 08:51
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: CSS validar para todos los navegadores

¿A que te refieres por "todos los navegadores"? ¿desde el firefox 1 hasta el 29?... ¿desde el IE1 hasta el 11... ? ¿solo los actuales?
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #3 (permalink)  
Antiguo 07/05/2014, 08:55
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: CSS validar para todos los navegadores

Cita:
Iniciado por Zeromm Ver Mensaje
¿A que te refieres por "todos los navegadores"? ¿desde el firefox 1 hasta el 29?... ¿desde el IE1 hasta el 11... ? ¿solo los actuales?
Incluyendo ViolaWWW, Mosaic y Netscape.
  #4 (permalink)  
Antiguo 07/05/2014, 09:06
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: CSS validar para todos los navegadores

Cita:
Iniciado por pzin Ver Mensaje
Incluyendo ViolaWWW, Mosaic y Netscape.
La virgen... de verdad le llamaron a un navegador "ViolaWWW"?¿?¿ por dios... xDD pero.. para darle soporte, con un hack sencillo se conseguirá que se vea igual que en firefox 29, ¿no? xD
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #5 (permalink)  
Antiguo 07/05/2014, 10:09
 
Fecha de Ingreso: marzo-2014
Mensajes: 10
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: CSS validar para todos los navegadores

Todos los navegadores tienen un procesado diferente. Diferentes márgenes, unos pocos píxeles, más o menos, etc
  #6 (permalink)  
Antiguo 07/05/2014, 18:40
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: CSS validar para todos los navegadores

En realidad me refiero a que se vea igual en Firefox, IE, Opera, Chrome de las versiones últimas.
Espero me puedan ayudar.
Gracias!
  #7 (permalink)  
Antiguo 07/05/2014, 20:30
Avatar de codeams  
Fecha de Ingreso: diciembre-2012
Ubicación: México
Mensajes: 103
Antigüedad: 11 años, 4 meses
Puntos: 16
Respuesta: CSS validar para todos los navegadores

Lo puedes lograr con preprocesadores como SASS y su complemento Compass. Te harán la vida fácil. Puedes utilizarlos con Rails de manera local en tu windows/linux/mac o puedes usar grunt. Yo utilizo Grunt y grunt-contrib-autoprefixer y compass me solucionan la vida al darle soporte a IE9+ y a las últimas de Chrome, Opera y Firefox.
__________________
¿Quién es codeams? codeams.ml
¿Qué hace en su tiempo libre? codepen.io/codeams
  #8 (permalink)  
Antiguo 07/05/2014, 21:20
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: CSS validar para todos los navegadores

estuve leyendo al respecto y no logro entender como funcionan,
  #9 (permalink)  
Antiguo 08/05/2014, 00:36
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: CSS validar para todos los navegadores

No te hace falta meterte en "lios" de sass... compass... rails... y demás para tener compatibilidad.

Para la compatibilidad tú lo que necesitas es http://modernizr.com/
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #10 (permalink)  
Antiguo 08/05/2014, 03:18
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: CSS validar para todos los navegadores

Si las cosas están bien hechas, extraño sería que no se viese todo igual en las mayoría de los navegadores.

Aunque SASS/Compass es una delicia.
  #11 (permalink)  
Antiguo 08/05/2014, 08:12
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: CSS validar para todos los navegadores

pues inserto el código creado por Modernizr y no cambia el background. incluso cambia de posición un div.
el código inserto en el head es el siguiente:

/* Modernizr 2.8.1 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-multiplebgs-cssgradients-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes
*/
;



window.Modernizr = (function( window, document, undefined ) {

var version = '2.8.0',

Modernizr = {},


docElement = document.documentElement,

mod = 'modernizr',
modElem = document.createElement(mod),
mStyle = modElem.style,

inputElem ,


toString = {}.toString,

prefixes = ' -webkit- -moz- -o- -ms- '.split(' '),



omPrefixes = 'Webkit Moz O ms',

cssomPrefixes = omPrefixes.split(' '),

domPrefixes = omPrefixes.toLowerCase().split(' '),


tests = {},
inputs = {},
attrs = {},

classes = [],

slice = classes.slice,

featureName,


injectElementWithStyles = function( rule, callback, nodes, testnames ) {

var style, ret, node, docOverflow,
div = document.createElement('div'),
body = document.body,
fakeBody = body || document.createElement('body');

if ( parseInt(nodes, 10) ) {
while ( nodes-- ) {
node = document.createElement('div');
node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
div.appendChild(node);
}
}

style = ['­','<style id="s', mod, '">', rule, '</style>'].join('');
div.id = mod;
(body ? div : fakeBody).innerHTML += style;
fakeBody.appendChild(div);
if ( !body ) {
fakeBody.style.background = '';
fakeBody.style.overflow = 'hidden';
docOverflow = docElement.style.overflow;
docElement.style.overflow = 'hidden';
docElement.appendChild(fakeBody);
}

ret = callback(div, rule);
if ( !body ) {
fakeBody.parentNode.removeChild(fakeBody);
docElement.style.overflow = docOverflow;
} else {
div.parentNode.removeChild(div);
}

return !!ret;

},



isEventSupported = (function() {

var TAGNAMES = {
'select': 'input', 'change': 'input',
'submit': 'form', 'reset': 'form',
'error': 'img', 'load': 'img', 'abort': 'img'
};

function isEventSupported( eventName, element ) {

element = element || document.createElement(TAGNAMES[eventName] || 'div');
eventName = 'on' + eventName;

var isSupported = eventName in element;

if ( !isSupported ) {
if ( !element.setAttribute ) {
element = document.createElement('div');
}
if ( element.setAttribute && element.removeAttribute ) {
element.setAttribute(eventName, '');
isSupported = is(element[eventName], 'function');

if ( !is(element[eventName], 'undefined') ) {
element[eventName] = undefined;
}
element.removeAttribute(eventName);
}
}

element = null;
return isSupported;
}
return isEventSupported;
})(),


_hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;

if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) {
hasOwnProp = function (object, property) {
return _hasOwnProperty.call(object, property);
};
}
else {
hasOwnProp = function (object, property) {
return ((property in object) && is(object.constructor.prototype[property], 'undefined'));
};
}


if (!Function.prototype.bind) {
Function.prototype.bind = function bind(that) {

var target = this;

if (typeof target != "function") {
throw new TypeError();
}

var args = slice.call(arguments, 1),
bound = function () {

if (this instanceof bound) {

var F = function(){};
F.prototype = target.prototype;
var self = new F();

var result = target.apply(
self,
args.concat(slice.call(arguments))
);
if (Object(result) === result) {
return result;
}
return self;

} else {

return target.apply(
that,
args.concat(slice.call(arguments))
);

}

};

return bound;
};
}

function setCss( str ) {
mStyle.cssText = str;
}

function setCssAll( str1, str2 ) {
return setCss(prefixes.join(str1 + ';') + ( str2 || '' ));
}

function is( obj, type ) {
return typeof obj === type;
}

function contains( str, substr ) {
return !!~('' + str).indexOf(substr);
}

function testProps( props, prefixed ) {
for ( var i in props ) {
var prop = props[i];
if ( !contains(prop, "-") && mStyle[prop] !== undefined ) {
return prefixed == 'pfx' ? prop : true;
}
}
return false;
}

function testDOMProps( props, obj, elem ) {
for ( var i in props ) {
var item = obj[props[i]];
if ( item !== undefined) {

if (elem === false) return props[i];

if (is(item, 'function')){
return item.bind(elem || obj);
}

return item;
}
}
return false;
}

function testPropsAll( prop, prefixed, elem ) {

var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');

if(is(prefixed, "string") || is(prefixed, "undefined")) {
return testProps(props, prefixed);

} else {
props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
return testDOMProps(props, prefixed, elem);
}
}
tests['multiplebgs'] = function() {
setCss('background:url(https://),url(https://),red url(https://)');

return (/(url\s*\(.*?){3}/).test(mStyle.background);
};



tests['cssgradients'] = function() {
var str1 = 'background-image:',
str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));',
str3 = 'linear-gradient(left top,#9f9, white);';

setCss(
(str1 + '-webkit- '.split(' ').join(str2 + str1) +
prefixes.join(str3 + str1)).slice(0, -str1.length)
);

return contains(mStyle.backgroundImage, 'gradient');
};

for ( var feature in tests ) {
if ( hasOwnProp(tests, feature) ) {
featureName = feature.toLowerCase();
Modernizr[featureName] = tests[feature]();

classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
}
}



Modernizr.addTest = function ( feature, test ) {
if ( typeof feature == 'object' ) {
for ( var key in feature ) {
if ( hasOwnProp( feature, key ) ) {
Modernizr.addTest( key, feature[ key ] );
}
}
} else {

feature = feature.toLowerCase();

if ( Modernizr[feature] !== undefined ) {
return Modernizr;
}

test = typeof test == 'function' ? test() : test;

if (typeof enableClasses !== "undefined" && enableClasses) {
docElement.className += ' ' + (test ? '' : 'no-') + feature;
}
Modernizr[feature] = test;

}

return Modernizr;
};


setCss('');
modElem = inputElem = null;


Modernizr._version = version;

Modernizr._prefixes = prefixes;
Modernizr._domPrefixes = domPrefixes;
Modernizr._cssomPrefixes = cssomPrefixes;


Modernizr.hasEvent = isEventSupported;

Modernizr.testProp = function(prop){
return testProps([prop]);
};

Modernizr.testAllProps = testPropsAll;


Modernizr.testStyles = injectElementWithStyles;
Modernizr.prefixed = function(prop, obj, elem){
if(!obj) {
return testPropsAll(prop, 'pfx');
} else {
return testPropsAll(prop, obj, elem);
}
};



return Modernizr;

})(this, this.document);
;
  #12 (permalink)  
Antiguo 08/05/2014, 08:43
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: CSS validar para todos los navegadores

Creo que te va a venir bien este link http://www.desarrolloweb.com/manuale...modernizr.html
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #13 (permalink)  
Antiguo 08/05/2014, 08:57
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: CSS validar para todos los navegadores

sigo sin poder.
en el head llamo a modernizr
<script src="modernizr-latest.js"></script>

creo una script con el código antes generado y no sucede nada. sigo intentando...
  #14 (permalink)  
Antiguo 08/05/2014, 10:28
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: CSS validar para todos los navegadores

no creo que en diez minutos hubieras leido todo el manual ¬¬
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #15 (permalink)  
Antiguo 08/05/2014, 19:46
Avatar de codeams  
Fecha de Ingreso: diciembre-2012
Ubicación: México
Mensajes: 103
Antigüedad: 11 años, 4 meses
Puntos: 16
Respuesta: CSS validar para todos los navegadores

Modernizr no hará mágia para que funcione, mordernizr te dirá si el navegador soporta o no determinada propiedad de CSS y mediante javascript podrás decidir que valor aplicar a dicha propiedad.

SASS, Compass, Jade, etc. No son para nada un lío, son lo mejor que le pudo pasar al diseño y desarrollo web, le regresaron todo lo divertido y le agregaron un poco más.
__________________
¿Quién es codeams? codeams.ml
¿Qué hace en su tiempo libre? codepen.io/codeams
  #16 (permalink)  
Antiguo 08/05/2014, 22:01
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 9 años, 11 meses
Puntos: 1
Respuesta: CSS validar para todos los navegadores

sigo leyendo e intentando.
también probé con normalize.css pero no lo logro
  #17 (permalink)  
Antiguo 08/05/2014, 23:45
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: CSS validar para todos los navegadores

Cita:
Iniciado por codeams Ver Mensaje
Modernizr no hará mágia para que funcione, mordernizr te dirá si el navegador soporta o no determinada propiedad de CSS y mediante javascript podrás decidir que valor aplicar a dicha propiedad.
No hace magia... solo ayuda a la compatibilidad de html5 y css3 con los navegadores antiguos, que es justo lo que necesita fersosa... magía sería que te hiciera la web, y no, no te la hace. Asique no, magia no hace.

Cita:
SASS, Compass, Jade, etc. No son para nada un lío, son lo mejor que le pudo pasar al diseño y desarrollo web, le regresaron todo lo divertido y le agregaron un poco más.
Estás confundiendo el ser útiles con ser un lio (al comenzar), y no tienen nada que ver. No dije que no fueran útiles, que discutir si los preprocesadores son útiles o no sería tan absurdo como discutir si la tierra es redonda o con forma rectangular, totalmente absurdo.

Pero creo que fersosa no es una persona experta, ni mucho menos en css, y si no controlas css meterte a usar sass y a entender el funcionamiento de instalación (que si tienes un pc tiene tela), el funcionamiento de las variables, los mixins, funciones, etc etc... para una persona novata puede ser más lioso que otra cosa.
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #18 (permalink)  
Antiguo 08/05/2014, 23:54
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: CSS validar para todos los navegadores

Por cierto.

Aquí tienes un generador de degradados on-line. Hay MUUUUCHOS MAS por google, este es uno de los que aceptan transpariencias.

generador degradado online
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #19 (permalink)  
Antiguo 09/05/2014, 01:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: CSS validar para todos los navegadores

Troll alarm.

Cita:
Iniciado por Zeromm Ver Mensaje
sería tan absurdo como discutir si la tierra es redonda o con forma rectangular, totalmente absurdo.
Elipsoide oblato.

Etiquetas: background, color, navegadores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:40.