Версия для слабовидящих на JavaScript + CSS

0

2

Доброго времени! Согласно федеральному закону ФЗ-419 от 01.12.2014,

6. Порядок обеспечения условий доступности для инвалидов по зрению официальных сайтов федеральных органов государственной власти, органов государственной власти субъектов Российской Федерации и органов местного самоуправления в сети «Интернет» устанавливается уполномоченным Правительством Российской Федерации федеральным органом исполнительной власти.

поэтому гос. учреждениям нужны сайты с версией для слабовидящих.

Исходный код - скрипт юкоза, написанный на jquery - переработан, дополнен, отлажен и улучшен. Скрипт не требует jquery.

Файлы:

special.js
/css/special.css
specialstyle1.css
/css/specialstyle2.css
/css/specialstyle3.css
html-блок

Листинг файла special.js

function set_cookie (name, value, expires, path, domain, secure) {
    document.cookie = name + '=' + escape(value) +
	((expires) ? '; expires=' + expires : '') +
	((path) ? '; path=' + path : '; path=/') +
	((domain) ? '; domain=' + domain : '') +
	((secure) ? '; secure' : '');
}
function get_cookie ( cookie_name ) {
	var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
	if ( results ) 
	    return ( unescape ( results[2] ) );
	else
	    return null;
}
function delete_cookie (cookie_name) {
	document.cookie = cookie_name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
}

function fz419settings() {
    set_cookie('fz419settings', 'enable', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
    set_cookie('fz419font', '2', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
    set_cookie('fz419color', '1', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}

function fz419fontsizeone(){
	document.getElementById('fz419font1').className = 'fz419fontActive';
	document.getElementById('fz419font2').className = '';
	document.getElementById('fz419font3').className = '';
	set_cookie('fz419font', '1', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}
function fz419fontsizetwo(){
	document.getElementById('fz419font1').className = '';
	document.getElementById('fz419font2').className = 'fz419fontActive';
	document.getElementById('fz419font3').className = '';
	set_cookie('fz419font', '2', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}

function fz419fontsizethree(){
	document.getElementById('fz419font1').className = '';
	document.getElementById('fz419font2').className = '';
	document.getElementById('fz419font3').className = 'fz419fontActive';
	set_cookie('fz419font', '3', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}
    
function fz419disableimage(){
	var anchor = document.getElementById('fz419enableimage');
	anchor.className = anchor.className.replace(/\bfz419imageActive\b/,'');
	document.getElementById('fz419disableimage').className += ' fz419imageActive';
	
	var images = document.getElementsByTagName('img');
	for(i = 0; i < images.length; i++) {images[i].style.display='none';}
	set_cookie('fz419img', 'imgnone', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}
    
function fz419enableimage(){
	var anchor = document.getElementById('fz419disableimage')
	anchor.className = anchor.className.replace(/\bfz419imageActive\b/,'');
	document.getElementById('fz419enableimage').className += ' fz419imageActive';
	
	var images = document.getElementsByTagName('img');
	for(i = 0; i < images.length; i++) {
		images[i].style.display='inherit';
		images[i].className=images[i].className.replace(new RegExp('(?:^|\\s)'+ 'none' + '(?:\\s|$)'), ' ');
	}
	set_cookie('fz419img', 'yes', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}

function fz419color1(){
	set_cookie('fz419color', '1', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}
function fz419color2(){
	set_cookie('fz419color', '2', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}
function fz419color3(){
	set_cookie('fz419color', '3', 'Thu, 01-Jan-2032 00:00:00 GMT', '/');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}
function fz419reset(){ 
	set_cookie('fz419settings', 'disable');
	url = window.location.href;
	location.replace(url.replace('#', ''));
}

// start main code
// get cookies
var fz419cookies = new Array();
fz419cookies['settings'] = get_cookie ('fz419settings');
fz419cookies['font'] = get_cookie ('fz419font');
fz419cookies['color'] = get_cookie ('fz419color');
fz419cookies['img'] = get_cookie ('fz419img');

if (fz419cookies['settings'] == '' || fz419cookies['settings'] == null || fz419cookies['settings'] == 'disable') {
	// hide settings area
	//jQuery('#fz419area').css({display:'none'});
	document.getElementById('fz419area').style.display = 'none';
} else {
	// if enabled
	// show settings area and hide activation button
	//jQuery('#enablefz419').css({display: 'none'});
	document.getElementById('fz419enable').style.display = 'none';
	//jQuery('#fz419area').css({display: 'block'});
	document.getElementById('fz419area').style.display = 'block';

    
    // disabling images if imgnone is set
    if (fz419cookies['img'] == 'imgnone') { 
        // https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load
    	window.onload = function() {
    		//adding class none to all images
    		// https://stackoverflow.com/questions/6304233/adding-a-class-to-img-tags-using-javascript
    		var images = document.getElementsByTagName('img');
            var i;
    		for(i = 0; i < images.length; i++) {images[i].className += ' none';}
    	    document.getElementById('fz419disableimage').className += ' fz419imageActive';
    		var anchor = document.getElementById('fz419enableimage')
    	    anchor.className = anchor.className.replace(/\bfz419imageActive\b/,'');
    		var anchors = document.getElementsByTagName('a');
    		for(i = 0; i < anchors.length; i++) {anchors[i].style.background = "none";}
    		var divs = document.getElementsByTagName('div');
    		for(i = 0; i < divs.length; i++) {divs[i].style.background = 'none';}
    		var spans = document.getElementsByTagName('span');
    		for(i = 0; i < spans.length; i++) {spans[i].style.background = 'none';}
    		var bodies = document.getElementsByTagName('body');
    		for(i = 0; i < bodies.length; i++) {bodies[i].style.background = 'none';}
    		var tables = document.getElementsByTagName('table');
    		for(i = 0; i < tables.length; i++) {tables[i].style.background = 'none';}
    		var tds = document.getElementsByTagName('td');
    		for(i = 0; i < tds.length; i++) {tds[i].style.background = 'none';}
    		var trs = document.getElementsByTagName('tr');
    		for(i = 0; i < trs.length; i++) {trs[i].style.background = 'none';}
    		var lis = document.getElementsByTagName('li');
    		for(i = 0; i < lis.length; i++) {lis[i].style.background = 'none';}
    		var uls = document.getElementsByTagName('ul');
    		for(i = 0; i < uls.length; i++) {uls[i].style.background = 'none';}
    	}
    
    } else {
    	// set active anchor fz419disableimg
    	window.onload = function() {
    	    document.getElementById('fz419enableimage').className += ' fz419imageActive';
    		var anchor = document.getElementById('fz419disableimage')
    	    anchor.className = anchor.className.replace(/\bfz419imageActive\b/,'');
    	}
    	
    }
    
    
    // set font size for all elements, fontsize2 is default
    var font_arr = new Array();
    font_arr['1'] =  new Array();
    font_arr['1']['fontsize'] = '14px';
    font_arr['1']['lineheight'] = '30px';
    font_arr['1']['h1'] = '22px';
    font_arr['1']['h2'] = '18px';
    font_arr['1']['h3'] = '16px';
    font_arr['2'] =  new Array();
    font_arr['2']['fontsize'] = '18px';
    font_arr['2']['lineheight'] = '35px';
    font_arr['2']['h1'] = '26px';
    font_arr['2']['h2'] = '22px';
    font_arr['2']['h3'] = '20px';
    font_arr['3'] =  new Array();
    font_arr['3']['fontsize'] = '24px';
    font_arr['3']['lineheight'] = '45px';
    font_arr['3']['h1'] = '32px';
    font_arr['3']['h2'] = '28px';
    font_arr['3']['h3'] = '26px';
    
    // set all elements font-size: and line-height as it is in font_arr
    	
    if (fz419cookies['font'] == '1' || fz419cookies['font'] == '2' || fz419cookies['font'] == '3' ) {
    	var tags_arr = new Array ('body', 'div', 'p', 'span', 'h1', 'h2', 'h3', 'a', 'table', 'td', 'tr', 
    	                          'tbody', 'thead', 'header', 'footer', 'section', 'li', 'ul');
    	var h_tags_arr = new Array ('h1', 'h2', 'h3');
    	var inner_tags_arr = new Array ('span', 'a'); //these tags may be inside h1, h2 tags
    	var fz419area_arr = new Array ('#fz419area', '#fz419font1', '#fz419font2', '#fz419font3', '#fz419disableimage', 
    	                               '#fz419enableimage', '#fz419color1', '#fz419color2', '#fz419color3', '#fz419color4');
    	
    	for(var i = 0; i < tags_arr.length; i++) {
    	    var el_arr = document.getElementsByTagName(tags_arr[i]);
            for(var j = 0; j < el_arr.length; j++) {
    			el_arr[j].style.fontSize = font_arr[fz419cookies['font']]['fontsize'];
    			el_arr[j].style.lineHeight = font_arr[fz419cookies['font']]['lineheight'];
    		}
    	}
    	
    	// set h1, h2, h3 elements font-size
    	for (i=0; i < h_tags_arr.length; i++) {
            var h_arr = document.getElementsByTagName(h_tags_arr[i]);
            for(var j=0; j < h_arr.length; j++) {
        		h_arr[j].style.fontSize = font_arr[fz419cookies['font']]['h1'];
        		// set font-size for inner tags using inner_tags_arr
        		for(var k=0; k < inner_tags_arr.length; k++) {
        			if (h_arr[j].innerHTML.indexOf(inner_tags_arr[k]) !== -1) {
        				var el_arr = h_arr[j].getElementsByTagName(inner_tags_arr[k]);
        				for(var m=0; m < el_arr.length; m++) {
        					el_arr[m].style.fontSize = '';
        					el_arr[m].style.lineHeight = '';
        				}
        			}
        		}
            }
        
            //var h2_arr = document.getElementsByTagName('h2');
            //for(var i = 0; i < h2_arr.length; i++) h2_arr[i].style.fontSize = font_arr[fz419cookies['font']]['h2'];
    	}
    	
    	// same work with fz419area elements: font-size:18px; line-height:35px;
    	for(var i = 0; i < fz419area_arr.length; i++) {
    	    var el_arr = document.getElementsByTagName(fz419area_arr[i]);
            for(var j = 0; j < el_arr.length; j++) {
    			el_arr[j].style.fontSize = font_arr[fz419cookies['font']]['fontsize'];
    			el_arr[j].style.lineHeight = font_arr[fz419cookies['font']]['lineheight'];
    		}
    	}
    
    	// reset active class from all
    	var anchor = document.getElementById('fz419font1')
    	anchor.className = anchor.className.replace(/\bfz419fontActive\b/,'');
    	var anchor = document.getElementById('fz419font2')
    	anchor.className = anchor.className.replace(/\bfz419fontActive\b/,'');
    	var anchor = document.getElementById('fz419font3')
    	anchor.className = anchor.className.replace(/\bfz419fontActive\b/,'');
    	
    	// set active class to enabled
    	if (fz419cookies['font'] == '1') document.getElementById('fz419font1').className += ' fz419fontActive';
    	if (fz419cookies['font'] == '2') document.getElementById('fz419font2').className += ' fz419fontActive';
    	if (fz419cookies['font'] == '3') document.getElementById('fz419font3').className += ' fz419fontActive';
    } 
        
    if(fz419cookies['color'] == '1') { 
    	document.write('<link type="text/css" rel="Stylesheet" href="/css/specialstyle2.css" />');
    }
    if(fz419cookies['color'] == '2') { 
        document.write('<link type="text/css" rel="Stylesheet" href="/css/specialstyle1.css" />');
    }
    if(fz419cookies['color'] == '3') { 
    	document.write('<link type="text/css" rel="Stylesheet" href="/css/specialstyle3.css" />');
    }
    
} //if enabled

document.write('<link type="text/css" rel="Stylesheet" href="/css/special.css" />');

В скрипте подключаются css, которые расположены в папке /css (в корне). При необходимости нужно исправить пути.

Листинг /css/special.css

#fz419area {
	color: #FFF !important;
	background: #7ABBEA !important;
	padding: 10px !important;
	z-index:1000 !important;
	font-size:14px !important !important;
	width:98% !important;
	font-weight: bold !important;
	text-align: center !important;
    }
    #fz419font1:hover, #fz419font2:hover, #fz419disableimage:hover, #fz419enableimage:hover {
	cursor: pointer !important;
	padding:5px !important;
	background: #000000 !important;
	color: #FFF !important;
    }
    a#fz419font1, a#fz419font2, a#fz419font3, a#fz419disableimage,  a#fz419reset, a#fz419enableimage, a#fz419disableimage {
	color:#fff !important;
    }
    a#fz419color1, a#fz419color3 {
	color: #000 !important;
    }
    #fz419font3:hover {
	cursor: pointer !important;
	padding:8px !important;
	background: #000000 !important;
	color: #FFF !important;
    }
    #fz419font1 {
	padding:5px !important;
	font-size:14px !important;
	font-weight: bold !important;
    }
    #fz419font2 {
	padding:5px !important;
	font-size:18px !important;
	font-weight: bold !important;
    }
    #fz419font3 {
	padding:8px !important;
	font-size:23px !important;
	font-weight: bold !important;
    }
    .none {display:none !important;}
    .yesimg {display:block !important;}
    
    #fz419disableimage, #fz419enableimage {
	padding:5px !important;
	font-size:14px !important;
	font-weight: bold !important;
    }
    .fz419imageActive {
	color:#ffffff !important;
	fontSize:14px !important;
	background:#000000 !important;
    }
    .fz419fontActive {color:#ffffff !important; background:#000000 !important;}
    #fz419color1,#fz419color1:hover {margin-left:1%;background:#FFFFFF !important;width:1%;padding:7px;border:soild 1px black;font-weight: bold; cursor: pointer;}
    #fz419color2,#fz419color2:hover  {margin-left:1%;background:#000000!important;color:#fff !important;width:1%;padding:7px;border:soild 1px black;font-weight: bold; cursor: pointer;}
    #fz419color3,#fz419color3:hover  {margin-left:1%;background:#9DD1FF !important;width:1%;padding:7px;border:soild 1px black;font-weight: bold; cursor: pointer;}
    #fz419reset {margin-left:1%;background:#003064 !important;color:#fff !important;width:1%;padding:7px;border:soild 1px black;font-weight: bold; cursor: pointer;}
    #fz419reset:hover {color:#E2E2E2 !important;}

.eye {background:none !important;display:inline-block;margin-right:25px;word-wrap: normal;}
.fz419panel {background: #333;}
.fz419button {border: 0;padding: 0 15px;background:none;font-size:1.2em; color:#fff;}

@font-face{
	font-family: 'FontAwesome';
	src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.eot?v=4.6.2');
	src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.eot?#iefix&v=4.6.2') 
	  format('embedded-opentype'), 
	  url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.woff2?v=4.6.2') 
	    format('woff2'), 
	  url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.woff?v=4.6.2') 
	    format('woff'), 
	  url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.ttf?v=4.6.2') 
	    format('truetype'), 
	  url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/fonts/fontawesome-webfont.svg?v=4.6.2#fontawesomeregular') 
	    format('svg');
	font-weight: normal;
	font-style: normal;
}
.fa {font-family: 'FontAwesome'; margin-right:8px;}
.fz419eye-icon:before {content:"\f06e";}
.fz419eye-icon-slash:before {content: "\f070";}

Листинг /css/specialstyle1.css

body {
	background-color: #000 !important;
background: #000 !important;
}
a, p, span, li, ul, td, tr, table, div {
	color: #fff !important;
}
p a, span a, li a, ul a, td a, tr a, table a, div, div a {
	color: #fff !important;
}
header, footer, #header, #footer, #content, #body, div, span, td, section, header, aside, h1, h2, h3, h4, h5  {
	background: #000 !important; color: #fff !important;
}
div img, span img {display:inline;}

a {
background: none !important;
}

Листинг /css/specialstyle2.css

body {
	background-color: #ffffff !important;
	background: #ffffff !important;
}
a, p, span, li, ul, td, tr, table, div {
	color: #000 !important;
}
p a, span a, li a, ul a, td a, tr a, table a, div, div a {
	color: #000 !important;
}
header, footer, #header, #footer, #content, #body, div, span, td, section, header, aside, h1, h2, h3, h4, h5  {
	background: #ffffff !important; color: #000 !important;
}

a {
background: none !important;
}
div img, span img {display:inline;}

Листинг /css/specialstyle3.css

body {
	background-color: #9DD1FF !important;
background: #9DD1FF !important;
}
a, p, span, li, ul, td, tr, table, div {
	color: #063462 !important;
}
p a, span a, li a, ul a, td a, tr a, table a, div, div a {
	color: #063462 !important;
}
header, footer, #header, #footer, #content, #body, div, span, td, section, header, aside, h1, h2, h3, h4, h5 {
	background: #9DD1FF !important; color: #063462 !important;

}
div img, span img {display:inline;}

a {
background: none !important;
}

Листинг html-,блока

  <div id="fz419area" style="display:none;">
    <div class="eye">
      Размер&nbsp;шрифта:&nbsp;<a onclick="fz419fontsizeone();" id="fz419font1">A</a>&nbsp;<a onclick="fz419fontsizetwo();" id="fz419font2">A</a>&nbsp;<a onclick="fz419fontsizethree();" id="fz419font3">A</a>&nbsp;
    </div>
    <div class="eye">Изображения<br />
      <a onclick="fz419disableimage();" id="fz419disableimage">Выключить</a>
      <a onclick="fz419enableimage();" id="fz419enableimage">Включить</a>
    </div>
    <div class="eye">
      Цвет&nbsp;сайта&nbsp;<a onclick="fz419color1();" id="fz419color1">Ц</a>&nbsp;<a onclick="fz419color2();" id="fz419color2">Ц</a>&nbsp;<a onclick="fz419color3();" id="fz419color3">Ц</a>&nbsp;
    </div>
    <a onclick="fz419reset();" id="fz419reset"><i class="fa fz419eye-icon-slash"></i>обычная версия сайта</a>
  </div>

Для работы скрипта необходимо добавить html-блок на страницы сайта, подключить special.js, указать правильные пути к файлам css в файле special.js

Иконка глаза - fontawesome http://fontawesome.io - подключается в special.css,

Ссылка

←	Скрыть часть пути через htaccess

HTTPS + APACHE 2.4 - NEED HELP :)

→

    font_arr['1'] =  new Array();
    font_arr['1']['fontsize'] = '14px';
    font_arr['1']['lineheight'] = '30px';
    font_arr['1']['h1'] = '22px';
    font_arr['1']['h2'] = '18px';
    font_arr['1']['h3'] = '16px';
    font_arr['2'] =  new Array();
    font_arr['2']['fontsize'] = '18px';
    font_arr['2']['lineheight'] = '35px';
    font_arr['2']['h1'] = '26px';
    font_arr['2']['h2'] = '22px';
    font_arr['2']['h3'] = '20px';
    font_arr['3'] =  new Array();
    font_arr['3']['fontsize'] = '24px';
    font_arr['3']['lineheight'] = '45px';
    font_arr['3']['h1'] = '32px';
    font_arr['3']['h2'] = '28px';
    font_arr['3']['h3'] = '26px';

Какой гнусный, отвратительный говнокод. Ты в курсе, что можно было, хотя-бы вот так:

font_arr = [
{},
{ fontsize : "14px", lineheight : "30px", h1 : "22px", h2 : "18px", h3: "16px"},
{ fontsize : "18px", lineheight : "35px", h1 : "26px", h2 : "22px", h3: "20px"},
{ fontsize : "24px", lineheight : "45px", h1 : "32px", h2 : "28px", h3: "26px"}
];

Почему вот это

document.getElementById('fz419enable').style.display = 'none';

нельзя завернуть в функцию? Почему все вот эти

var anchors = document.getElementsByTagName('a');
    		for(i = 0; i < anchors.length; i++) {anchors[i].style.background = "none";}
    		var divs = document.getElementsByTagName('div');
    		for(i = 0; i < divs.length; i++) {divs[i].style.background = 'none';}
    		var spans = document.getElementsByTagName('span');
    		for(i = 0; i < spans.length; i++) {spans[i].style.background = 'none';}
    		var bodies = document.getElementsByTagName('body');
    		for(i = 0; i < bodies.length; i++) {bodies[i].style.background = 'none';}
    		var tables = document.getElementsByTagName('table');
    		for(i = 0; i < tables.length; i++) {tables[i].style.background = 'none';}
    		var tds = document.getElementsByTagName('td');
    		for(i = 0; i < tds.length; i++) {tds[i].style.background = 'none';}
    		var trs = document.getElementsByTagName('tr');
    		for(i = 0; i < trs.length; i++) {trs[i].style.background = 'none';}
    		var lis = document.getElementsByTagName('li');
    		for(i = 0; i < lis.length; i++) {lis[i].style.background = 'none';}
    		var uls = document.getElementsByTagName('ul');
    		for(i = 0; i < uls.length; i++) {uls[i].style.background = 'none';}

anchors, divs, spans, etc нельзя было сделать строками, запихать в массив, а потом по нему пробежаться? И сделать forEach вместо цикла (да, for быстрее, но тут это не критично же)
Это достойно сайта govnokod.ru

crutch_master ★★★★★
(12.09.18 10:43:55 MSK)
Последнее исправление: crutch_master 12.09.18 10:45:33 MSK (всего исправлений: 2)

Ссылка

1) А без фонтавесомы слабовидящий вообще ничего не увидит? Ну жесть же из-за одной иконки тащить весь шрехт.

2) А чойта у вас шрехты в пихулях? Хотя бы пикты поставьте — экраны и дпи разные бывают вже.

deep-purple ★★★★★
(12.09.18 10:44:14 MSK)

Парсить лень. Эта штука меняет размер шрифта и некоторые цвета? Всё?
Не проще JSом навешивать нужный класс на body, а всю разницу в стилях задать в самих стилях? Размер шрифта в относительных единицах (rem, em…). Хватит пары селекторов под каждый из дополнительных вариантов. Если цвета много где захардкожены и переобределять их все вручную не хочется то можно задать их через css variable и менять значения этих переменных одним селектором.

MrClon ★★★★★
(12.09.18 10:58:37 MSK)

Ты, кстати, в курсе, что ты на всё, что видишь можешь навешать своих методов? То есть у тебя дергаешь var element = document.getElementById('fz419font1') и на это element ты можешь приделать функцию (element.myCoolMethodName = myCoolFunction), где через this у тебя будет доступ к этому element и ты может сделать какой-нибудь appendClass, setFontSize, setClass и даже свой forEach для объекта через прототип или костылём.

crutch_master ★★★★★
(12.09.18 10:58:46 MSK)

Ты бы хоть для приличия выложил бы на GitHub/GitLab/etc и сделал npm пакет... а тут говнокод. Ладно ошибся.

Noob_Linux ★★★★
(12.09.18 13:45:24 MSK)

Ответ на: комментарий от MrClon 12.09.18 10:58:37 MSK

правльно только в rem:

html {
  font-size: 16px;
}
body {
  font-size: 0.875rem;
}

А изменение размера шрифта потом делается так:

document.documentElement.style.fontSize = '2rem'

~~tz4678~~ ★★
(12.09.18 14:09:59 MSK)

Ответ на: комментарий от tz4678 12.09.18 14:09:59 MSK

document.documentElement.style.fontSize = '24px'

сам себя поправлю

~~tz4678~~ ★★
(12.09.18 14:11:58 MSK)

Ответ на: комментарий от tz4678 12.09.18 14:11:58 MSK

Нафига задавать CSS свойства через JS?

MrClon ★★★★★
(12.09.18 14:28:14 MSK)

Ответ на: комментарий от MrClon 12.09.18 14:28:14 MSK

Динамически типа, что пользак накликает, то и ставим.

deep-purple ★★★★★
(12.09.18 14:29:22 MSK)

Ответ на: комментарий от deep-purple 12.09.18 14:29:22 MSK

Это такая попытка воспроизвести ctrl++ силами самого сайта?
Я так понял партянка ТСа предполагает n статических вариантов дизигна. Для взыскательных есть ctrl++ в браузере, для не взыскательных фиксированных вариантов хватит (и наверное лучше даже не три, а один, чтобы меньше путаться и целиться в одну большую кнопку вместо одной из трёх маленьких)

P.S. оффтоп. Помнится на швабре, или ещё где, один инвалид по зрению рассказывал что все эти версии для слабовидящих слабовидящим не особо нужны. Они про ctrl++ все знают поголовно. Да и мелкую серую иконку включающую такой режим надо ещё найти и распарсить (нетривиальная задача, если ты видишь её как мутную кляксу :). А что нужно так это вменяемая вёрстка (чтобы браузерный режим для чтения был юзабелен), отсутствие приколов вроде «светло-серый текст на белом фоне с текстуркой» и, в качестве вишенки, разметка для скринридеров

MrClon ★★★★★
(12.09.18 14:43:09 MSK)

git сервисы не подходят. нет бесплатного, без капчи-гули и без мелкасофты.

znavko ★★
(12.09.18 14:54:17 MSK) автор топика

Ответ на: комментарий от znavko 12.09.18 14:54:17 MSK

проходить ущербную капчу гули на платформе для программистов - мне смысла нет.

znavko ★★
(12.09.18 14:56:27 MSK) автор топика

Ссылка

запилил хелов-ворд стиль?

ну ахуеть теперь

еще ГОСТом наверно какомто подкрепишь всю важность этого хеловорда

шел 2018-шо в головах, непонятно

~~missxu~~
(12.09.18 14:59:08 MSK)

Ссылка

Ответ на: комментарий от znavko 12.09.18 14:54:17 MSK

git сервисы не подходят. нет бесплатного, без капчи-гули и без мелкасофты.

умри долбайоб фанатик

~~missxu~~
(12.09.18 14:59:41 MSK)

Ссылка

Ответ на: комментарий от MrClon 12.09.18 14:43:09 MSK

Это такая попытка воспроизвести ctrl++ силами самого сайта?

Йееееее!!!! +100500 тебе! Я так с тобой согласен, что на всё согласен!

слабовидящим не особо нужны

Ну, знавался я раньше с челом. Он высококонтрастные уважал. Совсем плохой был по зрению. А пердел вообще постоянно, идёт пердит, стоит, разговаривает и пердит. Я как к нему приду, так не стесняюсь — вместе пердим. Забавный был чел с биноклями в оправах.

режим для чтения

Что за зверь? Нет, мне кажется я знаю о чём ты, просто никак не вспомню.

deep-purple ★★★★★
(12.09.18 15:03:42 MSK)

Ответ на: комментарий от znavko 12.09.18 14:54:17 MSK

Свой подними, чо ты как не тру!

deep-purple ★★★★★
(12.09.18 15:08:01 MSK)

Ссылка

Ответ на: комментарий от deep-purple 12.09.18 15:03:42 MSK

на всё согласен!

Ловлю на слове!

Он высококонтрастные уважал

Ну это да, но обычно «версия для слабовидящих» это только два варианта более крупного шрифта

Что за зверь?

Это вот это. В старом огнелисе (icecat) иконка книги (мелкая и серая, да) в адресной строки. В новой лисе может пересунули её куда-то. В Хроме вроде тоже что-то такое добавляли, но не уверен (если нет то наверное есть аддон реализующий его). Ломовейшая вещь для чтения портянок текста или борьбы творениями с особо гениальных дизигнеров

MrClon ★★★★★
(12.09.18 15:23:28 MSK)

Ответ на: комментарий от MrClon 12.09.18 15:23:28 MSK

Ловлю на слове

Это был словесный оборот для усиления контекста. Никаких обязательств он не предполагал. Ты разве сноску мелким шрифтом не заметил? Влкючай высоконтраст и жмакай Ctrl++!

иконка книги

А у мну она есть (ESR 45.2.0). Чот (эту) страницу не полностью показывает. Ограничение что-ли какое есть на размер полотна?

А вообще уважаю такого плана сайты, простые, без лишнего говна. Да и сам такие старался делать. И с заказчиками часто спорил, что, мол, перделки тут не нужны.

deep-purple ★★★★★
(12.09.18 15:32:59 MSK)

Ответ на: комментарий от deep-purple 12.09.18 15:32:59 MSK

Поздно выкручиваться, ты в моей власти!

Чот (эту) страницу не полностью показывает

Он пытается выцепить из страницы собственно контент, без менюшек, коментов и прочих излишеств. С форумами и прочим таким работает плохо. В данном случае контентом считается первый пост. Ответы размечены как коменты (itemtype="http://schema.org/UserComments"). Режим всё таки заточен именно под чтение портянок, а не как «улучшалка любых сайтов»

MrClon ★★★★★
(12.09.18 15:44:04 MSK)

Ответ на: комментарий от MrClon 12.09.18 15:44:04 MSK

ты в моей власти

http://memesmix.net/media/created/ch7hvu.jpg

контентом считается первый пост

Оно и его не до конца... ((

deep-purple ★★★★★
(12.09.18 15:55:26 MSK)

Ответ на: комментарий от deep-purple 12.09.18 15:55:26 MSK

У меня до конца https://i.imgur.com/zeEUxIf.jpg
Может твой древний некролис слишком древний? У меня 52.6.0

MrClon ★★★★★
(12.09.18 16:08:16 MSK)

Ответ на: комментарий от MrClon 12.09.18 16:08:16 MSK

А, чорд, у меня тоже до конца. Я на запятую смотрю, думаю, там дальше должно быть чо. А это ТС так препинул в конце сообщения.

Надо в магазин за добавкой итьтить...

deep-purple ★★★★★
(12.09.18 16:11:51 MSK)
Последнее исправление: deep-purple 12.09.18 16:12:40 MSK (всего исправлений: 1)

Ответ на: комментарий от deep-purple 12.09.18 16:11:51 MSK

пользуйтесь тчк.

znavko ★★
(12.09.18 22:35:56 MSK) автор топика

6. Порядок обеспечения условий доступности для инвалидов по зрению

почему только по зрению? нужно продвигать подобные законы и для других категорий. для умственно отсталых, например.

anonymous
(12.09.18 22:50:07 MSK)

Ссылка

Ответ на: комментарий от deep-purple 12.09.18 10:44:14 MSK

2) А чойта у вас шрехты в пихулях? Хотя бы пикты поставьте — экраны и дпи разные бывают вже.

Не бывают. 1in = 96px = 72pt в вебе, всегда. 1px, 1pt, 1mm, 1in, и вот это всё имеет однозначное, прибитое гвоздями, соответствие.

1px это не экранный пиксель, а единица измерения, определённая через видимый угол.

Это поменялось во времена перехода с Firefox 3.6 на 4.0 ещё, тыщу лет назад. Я думал, слоупоков нет уже.

Причём на экране первичен 1px, а 1pt/1mm/1in показывают коня в вакууме, приколочены к px, и не имеют никакого отношения к физическим pt/mm/in. А 1px не имеет прямого отношения к экранному DPI.

На (обычной) печати первичны физические размеры, а px определён через них.

https://www.w3.org/TR/css-values/#absolute-lengths

ChALkeR ★★★★★
(12.09.18 23:37:43 MSK)
Последнее исправление: ChALkeR 12.09.18 23:43:44 MSK (всего исправлений: 6)

Ссылка

А по теме — как-то трешово.

Ещё раз, для тех, кто не в теме: почему нельзя *всё* это сделать через css для `body.accessible`, а кнопкой на жс просто тогглить класс `accessible` на `body`?

ChALkeR ★★★★★
(12.09.18 23:50:14 MSK)
Последнее исправление: ChALkeR 12.09.18 23:50:25 MSK (всего исправлений: 1)

Ссылка

Ответ на: комментарий от Noob_Linux 12.09.18 13:45:24 MSK

Твоя аватарка идеально отражает суть того, что я увидел в посте (я даже читать эту дичь не стану).

r3lgar ★★★★★
(13.09.18 00:42:42 MSK)

Ссылка

Ответ на: комментарий от znavko 12.09.18 22:35:56 MSK

Ты упоротый? Про тебя речь, это ты запятые ставишь.

deep-purple ★★★★★
(13.09.18 01:07:46 MSK)

Ссылка

Ответ на: комментарий от deep-purple 12.09.18 10:44:14 MSK

В CSS все единицы измерения фиксированно зависят от px. Причём и пиксель ненастоящий. Честные варианты не взлетели.

anonymous
(13.09.18 12:44:17 MSK)

Ссылка

Ответ на: комментарий от crutch_master 12.09.18 10:58:46 MSK

Не надо так делать.

anonymous
(13.09.18 12:45:28 MSK)

Ответ на: комментарий от anonymous 13.09.18 12:45:28 MSK

Не надо так делать.

Потому что... ?

crutch_master ★★★★★
(14.09.18 04:16:14 MSK)

Ответ на: комментарий от crutch_master 14.09.18 04:16:14 MSK

потому

~~tz4678~~ ★★
(14.09.18 16:29:47 MSK)

Ответ на: комментарий от tz4678 14.09.18 16:29:47 MSK

Еще автору надо почитать https://developer.mozilla.org/ru/docs/Web/JavaScript документацию.

Все jQuery фичи давно реализованы в JS:

> document.body.classList.toggle('blyad')
true
> document.body.classList.toggle('blyad')
false

~~tz4678~~ ★★
(14.09.18 16:35:37 MSK)

Ссылка

Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.

←	Скрыть часть пути через htaccess

Web-development

HTTPS + APACHE 2.4 - NEED HELP :)

→

Похожие темы