3

Клиент это не всегда продвинутый пользователь, который знает как обновить страницу при помощи ctrl+f5. Как выйти из этой ситуации? прочитал несколько форумов, но что-то не понимаю как это сделать в style.css. Помогите пожалуйста! Файл размещён на сервере. Можно по подробнее куда и что надо прописать? Прикладываю файл со стилями style.css.

@import "http://webfonts.ru/import/arnamuserif.css";

ul{
    margin: 0; padding: 0; list-style: none;
}
img{margin: 0; padding:0; border: 0;}
p{padding: 0 0 13px 0; margin: 0; }
a{ color: #2185c5; }

.clearfix:after {
    content: ".";
    clear: both;
    height: 0;
    font-size:0;
    visibility: hidden;
    display: block;
}

.clearfix {
    display: inline-block; /* Fixes IE/Mac */
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

html, body{
    margin: 0; padding: 0;
    min-width: 1000px;
}
body{
    background: #fff;
    font-family: 'Arian AMU Serif', Tahoma, sans-serif;
    color: #ffffff;
}

h1,h2,h3{
    font-family: 'Arian AMU Serif', Tahoma, sans-serif;
}

.p_header{
    position: fixed;
    left: 0; top: 0; right: 0;
    height: 58px;
    background: rgba(0,0,0,0.2);
    z-index: 10;
}
.p_header ul{
    display: block;
    width: 1000px; height: 58px;
    margin: 0 auto;
    padding: 0 0 0 30px;
}
.p_header ul li{
    float: left;
}
.p_header ul li a{
    display: block;
    font-size: 18px;
    line-height: 58px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 0 16px;
}
.p_header ul li.active a{
    color: #36a1ff;
    text-decoration: underline;
}
.p_header ul li:first-child a{
    text-align: left;
    padding: 0 21px 0 0;
}
.p_header ul li:last-child a{
    text-align: right;
    padding: 0 0 0 21px;
}

.p_center{
    z-index: 1;
    min-height: 980px;
    padding: 58px 0 0 0;
}
.p_center.main{
    background: url(images/bg_main.jpg) top center fixed;
    height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.p_center.about{
    background: url(images/bg_about.jpg) top center fixed;
    height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.p_center.benefits{
    background: url(images/bg_benefits.jpg) top center fixed;
    height: 100%;
    position: center;
    overflow: hedden;
    width: 100%;
}

.p_center.location{
    background: url(images/bg_location.jpg) top center fixed;
    height: 100%;
    position: center;
    overflow: hedden;
    width: 100%;
}
.p_center.news{
    background: url(images/bg_news.jpg) no-repeat 50% 0;
}
.p_center.promotions{
    background: url(images/bg_promotions.jpg) top center fixed;
    height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.p_center.quality{
    background: url(images/bg_quality.jpg) no-repeat 50% 0;
}
.p_center.houses,
.p_center.house1,
.p_center.house2,
.p_center.house3,
.p_center.house4,
.p_center.house5,
.p_center.house6,
.p_center.townhouses,
.p_center.cottages,
.p_center.cotta1,
.p_center.cotta2,
.p_center.cotta3,
.p_center.cotta4,
.p_center.cotta5,
.p_center.cotta6,
.p_center.cotta7,
.p_center.cotta8,
.p_center.cotta9,
.p_center.cotta10,
.p_center.cotta11,
.p_center.cotta12,
.p_center.cotta13,
.p_center.cotta14,
.p_center.cotta15,
.p_center.cotta16,
.p_center.cotta17,
.p_center.cotta18,
.p_center.map1,
.p_center.map2,
.p_center.map3

{
    background: url(images/bg_houses.jpg) top center fixed;;
}
.p_center.contacts{
    background: url(images/bg_contacts.jpg) no-repeat 40% 0;
}
.p_center .inner{
    position: relative;
    width: 1000px;
    margin: 0 auto;
}
.p_center .main_map{
    position: absolute;
    left: 0; top: 30px;
    width: 190px; height: 167px;
    background: url(images/img_map.png) no-repeat;
}
.p_center .main_sale_count{
    position: absolute;
    left: 220px; top: 30px;
    width: 100px;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
}
.p_center a.main_logo{
    position: absolute;
    left: 392px; top: 30px;
    width: 215px; height: 168px;
    background: url(images/logo.png) no-repeat;
}
.p_center a.main_download_buklet{
    position: absolute;
    left: 642px; top: 30px;
    border: 1px solid #ffffff;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 10px 10px 8px 10px;
    font-size: 14px;
    line-height: 14px;
    color: #ffffff;
    text-decoration: none;
}
.p_center .main_contacts{
    position: absolute;
    top: 30px; right: 0;
    padding: 0 0 0 30px;
    background: url(images/ic_phone.png) no-repeat 0 8px;
}
.p_center .main_contacts.map{
    z-index: 10;
    top: 80px; right: 50px;
}
.p_center .main_contacts div{
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
}
.p_center .main_contacts button{
    color: #fff;
    font-size: 14px;
    line-height: 1;
    background: #36a1ff;
    border: 0;
    padding: 6px 20px;
    border-radius: 2px;
    cursor: pointer;
}
.p_center h1.main{
    position: absolute;
    left: 0; right: 0; top: 200px;
    text-align: center;
    font-size: 30px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 1px -2px 2px #000;
    text-transform: uppercase;
}
.p_center .main_select_house{
    position: absolute;
    left: 0; right: 0; top: 794px;
    text-align: center;
}
.p_center .main_discount{
    position: absolute;
    left: 0; right: 0; top: 867px;
    text-align: center;
}

.p_catalog{
    position: absolute;
    left: 0; right:0; top: 470px;
    background: #ffffff;
    border-radius: 10px;
    height: 300px;
    padding: 0 25px;
}
.p_catalog .item{
    float: left;
    width: 190px; height: 300px;
    padding: 10px 8px;
    box-sizing: border-box;
    color: #000;
}
.p_catalog .item:hover{
    background: #c4c4b1;
}
.p_catalog .item .address{
    border-bottom: 2px dashed #e2dfe0;
    text-align: center;
    padding: 0 0 10px 0;
    margin: 0 0 15px 0;
}
.p_catalog .item .title{
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 10px 0;
}
.p_catalog .item .price{
    font-size: 18px;
    line-height: 1;
    text-align: center;
    color: #fff;
    background: #ff0000;
    border-radius: 3px;
    width: 120px;
    padding: 6px 0;
    margin: 0 0 15px 27px;
}
.p_catalog .item .image{
    width: 174px; height: 94px;
    margin: 0 0 15px 0;
    border-radius: 5px;
}
.p_catalog .item a.more{
    display: block;
    width: 172px; height: 30px;
    border: 1px solid #000;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 30px;
    text-align: center;
    color: #000;
    border-radius: 5px;
    cursor: pointer;
}


.p_progress{
    background: #ffffff;
}
.p_progress .inner{
    position: relative;
    width: 1000px; height: 140px;
    margin: 0 auto;
}
.p_progress .hand{
    position: absolute;
    left: 0; top: 65px;
    width: 33px; height: 15px;
    background: url(images/img_pg_hand.png) no-repeat;
}
.p_progress .arrow{
    position: absolute;
    left: 60px; top: 65px;
    width: 890px; height: 22px;
}
.p_progress .arrow li{
    height: 22px;
}
.p_progress .arrow li.back{
    position: absolute; width: 100%;  z-index: 1;
    background: url(images/img_pg_arrow.png) no-repeat;
}
.p_progress .arrow li.active{
    position: absolute; z-index: 2;
    width: 0%;
    background: url(images/img_pg_arrow_a.png) no-repeat;
}
.p_progress .arrow li.knight{
    position: absolute;
    left: 0; top: -50px;
    min-width: 97px; height: 60px;
    background: url(images/img_pg_knight.png) no-repeat 100% 0;
    width: 15%;
}
.p_progress .arrow.about li.active{ width: 15%; }
.p_progress .arrow.about li.knight{ width: 25%; }
.p_progress .arrow.benefits li.active{ width: 30%; }
.p_progress .arrow.benefits li.knight{ width: 40%; }
.p_progress .arrow.location li.active{ width: 45%; }
.p_progress .arrow.location li.knight{ width: 55%; }
.p_progress .arrow.promotions li.active{ width: 55%; }
.p_progress .arrow.promotions li.knight{ width: 65%; }
.p_progress .arrow.quality li.active{ width: 65%; }
.p_progress .arrow.quality li.knight{ width: 75%; }
.p_progress .arrow.houses li.active{ width: 80%; }
.p_progress .arrow.houses li.knight{ width: 90%; }
.p_progress .arrow.contacts li.active{ width: 100%; }
.p_progress .arrow.contacts li.knight{ width: 100%; }





/*
.p_progress .arrow{
    position: absolute;
    left: 60px; top: 65px;
    width: 890px; height: 22px;

}
.p_progress .arrow:after{
    content: "";
    position: absolute;
    height: 22px; width: 50%;
    background: url(images/img_pg_arrow_a.png) no-repeat;
    z-index: 2;
}
*/

.p_footer{
    background: #ecece5 url(images/bg_footer_top.png) repeat-x;
    position: inherit;
    left: 0; bottom: 0;
    padding: 10px;
    width: 100%;
}
.p_footer .inner{
    position: relative;
    width: 1000px; height: 200px;
    margin: 0 auto;
}
.p_footer .logo{
    position: absolute;
    left: 0; top: 25px;
    width: 113px; height: 89px;
    background: url(images/logo_footer.png);
}
.p_footer .copyright{
    position: absolute;
    left: 140px; top: 50px;
    font-size: 14px;
    line-height: 1;
    color: #000;
}
.p_footer .convention{
    position: absolute;
    left: 450px; top: 50px;
    font-size: 14px;
    line-height: 1;
    color: #000;
}
.p_footer .contacts{
    position: absolute;
    right: 0px; top: 25px;
    color: #000;
    background: url(images/ic_phone2.png) no-repeat 0 27px;
    padding: 0 0 0 30px;
}
.p_footer .contacts label{
    display: block;
    font-size: 13px;
    line-height: 1;
    margin: 0 0 10px -30px;
}
.p_footer .contacts div{
    text-align: right;
    margin: 0 0 5px 0;
}
.p_footer .contacts a{
    display: block;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}
.p_footer .contacts button{
    color: #fff;
    font-size: 14px;
    line-height: 1;
    background: #36a1ff;
    border: 0;
    padding: 6px 20px;
    border-radius: 2px;
    margin: 5px 0 0 -10px;
    cursor: pointer;
}


.p_map{
    margin: -58px 0 0 0;
    width: 100%;
    height: 1030px;
}
.p_map_info_box{
    position: absolute;
    left: -165px; top: 155px;
    background: #ffffff;
    width: 300px;
    border-radius: 10px;
    padding: 15px;
    color: #000;
    text-align: center;
    font-size: 14px;
}
.p_map_info_box2{
    width: 300px;
    color: #000;
    text-align: center;
    font-size: 14px;
    padding: 10px 0 0 0;
}
.p_map_info_box .title{
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}
.p_map_info_box .title span{
    border-bottom: 1px solid #000;
}
.p_map_info_box p{
    margin: 0 0 10px 0;
}
.p_map_info_box .phone{
    margin: 0 0 20px;
}
.p_map_info_box .phone a{
    font-size: 18px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
}
.p_map_info_box .notice{
    padding: 10px;
    background: #36a1ff;
    color: #ffffff;
}

.p_benefits{
    position: static;
    top: auto; left: 0; right: 0;
    text-align: center;
}
.p_benefits li{
    display: inline-block;
    width: 240px;
    margin: 0 0 10px 0;
    vertical-align: top;
}
.p_benefits h2{
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.p_benefits img{
    margin: 0 0 10px 0;
}
.p_benefits p{
    font-size: 14px;
    line-height: 1.4;
}

.p_text{
    padding: 350px 30px 0 30px;
}
.p_text .img{
    text-align: center;
    margin: 0 0 20px 0;
}
.p_text h1{
    font-size: 18px;
    line-height: 1;
    margin: 0 0 20px 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}
.p_text p{
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 20px 0;
    text-align: justify;
}

.popup_back{
    display: none;
    background: rgba(0,0,0,0.6);
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 100;
}
.popup_callme{
    position: relative;
    margin: 200px auto 0 auto;
    width: 368px; height: 388px;
    background: url(images/bg_popup_callme.png) no-repeat;
}
.popup_callme .close{
    position: absolute;
    right: 35px; top: 70px;
    width: 16px; height: 16px;
    background: url(images/ic_popup_close.png) no-repeat;
    cursor: pointer;
}
.popup_callme form{
    padding: 100px 0 0 80px;
}
.popup_callme input{
    width: 210px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #c2c2c2;
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    color: #000;
}
.popup_callme button{
    width: 210px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 0;
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    background: #36a1ff;
    color: #ffffff;
    cursor: pointer;
}

.p_quality{
    position: absolute;
    top: 280px; left: 0; right: 0;
    height: 639px;
    background: url(images/bg_quality.png) no-repeat;
    padding: 30px 0 0 85px;
}
.p_quality .text{
    width: 530px; height: 570px;
    overflow: hidden;
    overflow-y: scroll;
    color: #ffffff;
    padding: 0 100px;
}
.p_quality .text table{
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}
.p_quality .text table td{
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    vertical-align: top;
}
.p_quality .text::-webkit-scrollbar {
    width: 15px;
    background-color: rgba(0, 44, 68, 0.35);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.p_quality .text::-webkit-scrollbar-thumb {
    background-color: #36a1ff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

.p_promo{
    display: block;
    width: 562px; height: 162px;
    background: url(images/bg_promotion2.png) no-repeat -300px -330px;
    margin: 0 0 0 189px;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    padding: 40px 0 0 0;
    box-sizing: border-box;
}
.p_promo big{
    font-weight: bold;
}
.p_promo2{
  padding-top: 300px;
    position: relative;
}
.p_promo2:after{
    position: absolute;
    width: 800px;
    height: 360px;
    background: url(images/bg_promotion2.png) no-repeat 0 0;
    content: "";
}




.header-txt{
    text-transform: uppercase;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding: 5px 5px;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
    display: inline-block;
    letter-spacing: 3px;
}
.header-info{
    text-align: center;
    font-size: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #fff;
    text-align: left;
}


/* Gallery */
.gallery img{
    margin:5px;
    border:3px solid #fff;
}
a.photo:hover img{
border:3px solid #1E90FF;   
}   

.p_card{
padding: 330px 0px 0 0px;
}
2
  • 3
    Зачем нужна колбаса из стилей? при подключении стилей добавляй гет параметр, что бы браузер по нему ориентировался новая версия файла или нет. Типа: <style="style.css?v=10120301230"></style> 25 авг 2017 в 11:33
  • не очень понял зачем делать это именно в css, можно заголовки отправлять браузеру о том что кэш пора менять, погугли в эту сторону
    – Maximmka
    25 авг 2017 в 14:01

1 ответ 1

4

Самый простой метод "заставить" браузер скачать обновлённый CSS файл, это динамически менять "параметр" для данного файла, например в PHP вы создаёте переменную: $vers = 1.0;
и добавляете параметр при подключения файла:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo $vers; ?>" />

В итоге, когда вы обновляете файл вам надо просто зайти в код и в переменную $vers вставить другое значение $vers = 1.1; и т.д
При загрузке страницы браузер проверяет все подключаемые файлы, и если видит, что все файлы "знакомые", проходит дальше, а когда вы передаёте параметр то для браузера это уже новый файл (хотя после ? ему параметр не нужен) и он просто скачивает данный файл.

1
  • Спасибо) всё заработало! Правда не сразу удалось найти где css подключается.
    – Sergey
    27 авг 2017 в 9:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.